Question

我一直在尝试在文本区域使用和onchange事件但是没有任何工作。正常的change（）或onChange（）函数什么都不做。

我尝试过像

这样的事情

$('#areaName').on('input', function(){})
$('#areaName').bind('input', function(){})

我尝试过在网上找到的eveything解决方案无济于事。

我只需要一段代码就可以在文本区域中的文本被修改时触发一个函数。

Answer 1

以下代码按预期工作，在Firefox中测试

   $(function ()
    {
        $('#areaName').change(function () {
            alert($('#areaName').val());
        });
    });

Answer 2

使用键盘事件plunker：

JS：

$(document).ready(function(){
  $("#area").on("keypress",function(){
    alert("hello")
  })

})

如果您使用 jqueryui ，则可以将调整大小事件捕获为：

 $("#area").resizable({
    resize: function() {
        alert("hello2")
    }
 });

Answer 3

试试这个：

 <!DOCTYPE html>

    <head>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
      <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style>

    </style>
    </head>
    <body>

     <textarea rows="4" cols="50" id="textArea">

     </textarea>
    <script>
      $(document).ready(function(){
        $('#textArea').bind('input propertychange', function() {
          console.log(this.value);
        });
      });
    </script>
    </body>
    </html>

Answer 4

这适用于我的Firefox：

 <textarea oninput="alert('input detected')";>initial input text</textarea>

文本区域的Onchange事件

4 个答案: