Question

我有一个textarea。在用户在textarea中键入X个字符后，我想要触发几个不同的事件。

将输入的前X个字符追加到另一个文本字段中。
展开textarea以提供更多空间继续输入

我知道我可以在jquery中使用keypress事件，但是如何在输入25个字符之后引发事件？

我目前正在尝试这个：

$('#post-content-field').keyup(function () {
$('#post-title-field').val($("#post-content-field").val()).trigger('change');
                            });

Answer 1

每次按键后，您都可以查看textarea值的.length。如果它大于或等于25，则抓住前几个字符并增加textarea高度。

$("textarea.affectMe").on("keyup", function(){
  if ( this.value.length >= 25 && !$(this).hasClass("done") ) {
    $(this).addClass("done");
    $(".threeChars").val( this.value.substring(0,25) );
  }
});

请注意，我在textarea中添加了一个类，因此当长度大于25时，我们不会在每次按键后反复执行此操作。

演示：http://jsbin.com/afonar/edit#javascript,html

Answer 2

使用jquery和下面的countChar函数

 <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script>
        function countChar(val){
                                var len = val.value.length;
                                if (len >= 500) {
                                    val.value = val.value.substring(0, 500);
                                }else {
                                    $('#charNum').text(500 - len);
                                }
        };
    </script>

在HTML中调用类似

的函数

<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum">
</div>

div将显示字符数。你可以在函数

中做任何事情

参考：Count characters in textarea

Answer 3

这是供你参考，你可以做任何你喜欢的事。删除阻止您添加更多文本的行

请参阅下文

function countChar(val){
    var len = val.value.length;
     $('#charNum').text(len);
     if (len >= 500) {
                     // Copy
      }else {
            //DO anything
      }
};

Answer 4

$('textarea').bind('keyup', function(e){
    if(e.target.value.length === 25) {
        // do stuff
    }
});

按键后的事件（jquery）

4 个答案: