Question

我的目标是在点击按钮时反转文本框内的文本。到目前为止，我所做的就是这样。我的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”的文本框内写的文本。插件看起来如何实现这一点？任何人都可以给我任何关于如何编写插件的建议吗？

Answer 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);

Answer 2

您正在为p代码

调用reverseText函数

$('p').reverseText();

将reverseText函数应用于代码

下面的输入框

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

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

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

注意 - 确保{h}内的id="ch"必须是唯一的。

jquery插件来反转文本框值

2 个答案: