javascript “输入属性更改”上的 jQuery 函数绑定未按预期触发

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19327140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 15:11:02  来源:igfitidea点击:

jQuery function bind on 'input propertychange' not firing as expected

javascriptjqueryfunctionbind

提问by Sloth Armstrong

I have jQuery code that calls a function as such:

我有调用函数的 jQuery 代码,如下所示:

$('#text_area').bind('input propertychange', function() {...

The element being bound to the function is a text area. When I type and delete text the function gets called just fine, however when I select all of the text, either through a hot-key or dragging the mouse, and then hit backspace the function is not called. This is the only instance where I can not get the function to call. Is this expected with the 'input propertychange'event? If so how can I change this to work as expected? Note that this holds true for Chrome, IE, and Firefox.

绑定到函数的元素是一个文本区域。当我键入和删除文本时,该函数被调用得很好,但是当我通过热键或拖动鼠标选择所有文本,然后按退格键时,该函数不会被调用。这是我无法调用函数的唯一实例。这是'input propertychange'事件的预期吗?如果是这样,我如何才能将其更改为按预期工作?请注意,这适用于 Chrome、IE 和 Firefox。

回答by Kyle Muir

Would this suit your purposes?

这是否适合您的目的?

$('#text_area').on('keyup', function() {
    console.log('called');
});

Fiddle: http://jsfiddle.net/KyleMuir/ruJZD/

小提琴:http: //jsfiddle.net/KyleMuir/ruJZD/

Also, as of jQuery 1.7 .on()(http://api.jquery.com/on/) is the preferred way to bind events.

此外,从 jQuery 1.7 .on()( http://api.jquery.com/on/) 开始是绑定事件的首选方式。

EDIT:since someone was after right click pasted text, here is an update:

编辑:由于有人在右键单击粘贴文本后,这里是一个更新:

$('#text_area').on('keyup paste', function() {
    console.log('called');
});

Fiddle: http://jsfiddle.net/KyleMuir/ruJZD/9/

小提琴:http: //jsfiddle.net/KyleMuir/ruJZD/9/

回答by Arunprasanth K V

You need to call a function when your text area get cleared. Or you want to call the same function when text is pasted into the text area.

当您的文本区域被清除时,您需要调用一个函数。或者您想在文本粘贴到文本区域时调用相同的函数。

You can use the same code what you are included in your question. I have included a working demo with this answer

您可以使用与问题中包含的代码相同的代码。我在这个答案中包含了一个工作演示

 <textarea id='textarea1'>data</textarea>

//....................

//………………

$("textarea").bind('input propertychange', function(){
  alert($(this).val());
});

Note: Use jquery plugin

注意:使用jquery插件

DEMO

演示

If you want to prevent simultaneous triggers then use the below code

如果要防止同时触发,请使用以下代码

<textarea id="textarea"></textarea>

//.......

//…………

var text = "";
$("#textarea").on("change keyup paste", function() {
    var Val = $(this).val();
    if(Val == text) {
        return; //prevent multiple simultaneous triggers
    }

    text = Val;

    alert("changed!");
});

DEMO1

演示1

'Note: Checked with chrome and firefox'
'Note: Checked with chrome and firefox'

回答by Bachas

.bind method has been deprecated latest 3 j query versions. instead on we can use .on in to get correct answer.

.bind 方法已被弃用最新的 3 j 查询版本。相反,我们可以使用 .on in 来获得正确的答案。

 <textarea id="anytextid"></textarea>
<div id="sethere"></div>

correct text for this change

此更改的正确文本

$('#anytextid').on('input propertychange', function() {
    $('#sethere').html($(this).val().length );
});