2014-10-30 38 views
0

我的目標是扭轉文本內的文本框中按鈕單擊。到目前爲止,我所做的就是這樣。 我的HTMLjquery插件來反轉文本框的值

<html xmlns="http://www.w3.org/1999/xhtml">  
<head> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery.reverse.js"></script> 
</head> 
<body> 
<p>mithun</p> 
<input name="writehere" id="ch" type="text" class="jst" /> 
<input name="check" type="button" value="b1" id="b1"/> 
<script type="text/javascript"> 
$("#b1").click(function() { 
$('p').reverseText(); 
});</script> 
</body></html> 

我jquery.reverse.js插件

(function($) { 

// jQuery plugin definition 
$.fn.reverseText = function(params) { 

    // merge default and user parameters 

    params = $.extend({minlength: 0, maxlength: 99999}, params); 

    // traverse all nodes 
    this.each(function() { 

     // express a single node as a jQuery object 
     var $t = $(this); 

     // find text 
     var origText = $t.text(), newText = ''; 

     // text length within defined limits? 
     if (origText.length >= params.minlength && origText.length <= params.maxlength) { 

      // reverse text 
      for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1); 
      $t.text(newText); 

     } 

    }); 

    // allow jQuery chaining 
    return this; 
}; 
})(jQuery); 

這是工作,如果我想扭轉<p></p>文本。但我想要做的是扭轉按鈕單擊文本框中編寫的文本與id =「ch」。如何插件將看起來像實現這一目標? 任何人都可以給我任何建議如何插件將需要寫?

回答

1

使用.val()而不是.text()Example

(function($) { 

// jQuery plugin definition 
$.fn.reverseText = function(params) { 

    // merge default and user parameters 

    params = $.extend({minlength: 0, maxlength: 99999}, params); 

    // traverse all nodes 
    this.each(function() { 

     // express a single node as a jQuery object 
     var $t = $(this); 

     // find text 
     var origText = $t.val(), newText = ''; 

     // text length within defined limits? 
     if (origText.length >= params.minlength && origText.length <= params.maxlength) { 

      // reverse text 
      for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1); 
      $t.val(newText); 

     } 

    }); 

    // allow jQuery chaining 
    return this; 
}; 
})(jQuery); 
0

要調用reverseText功能p標籤

$('p').reverseText(); 

在插件代碼應用reverseText函數輸入框中使用下面的代碼

$('#ch').reverseText(); 

還需要使用.val()代替.text()因爲閱讀價值input已在value屬性值

// find text 
     var origText = $t.val(), newText = ''; 

注意 - 確保id="ch"必須通過DOM html唯一。