jquery插件反转文本框值答案

【问题标题】：jquery plugin to reverse textbox valuejquery插件反转文本框值
【发布时间】：2014-10-30 07:31:03
【问题描述】：

我的目标是在单击按钮时反转文本框内的文本。到目前为止，我所做的是这样的。我的html

<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" 反转文本框中写入的文本。插件将如何实现这一目标？谁能给我任何建议如何编写插件？

【问题讨论】：

标签： javascript jquery plugins jquery-plugins

【解决方案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);

【讨论】：

【解决方案2】：

你正在为p标签调用reverseText函数

$('p').reverseText();

将reverseText函数应用到输入框使用下面的代码

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

在插件代码中也需要使用.val() 而不是.text() 读取值，因为input 在value 属性中具有值

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

注意 - 确保id="ch"在整个 DOM html 中必须是唯一的。

【讨论】：