javascript Knockout.js 事件跟踪输入文本框中的每个文本更改

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17905787/
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 10:03:41  来源:igfitidea点击:

knockout.js event that tracks every text change inside a input text box

javascriptjavascript-eventsknockout.js

提问by user79307

I'm new to knockout js. I want to call a function every time a text changes inside a text box. I researched abit and implemented keyup, keydown and keypress but they didn't work properly. If anybody could give me a solution or please redirect me to some document that is helpful for my scenario. And If there is some sort of documentation about all of the events (inbuilt and custom) that are available in knockout Js, that would be really helpful.

我是淘汰赛的新手。每次文本框中的文本更改时,我都想调用一个函数。我研究了 abit 并实现了 keyup、keydown 和 keypress,但它们无法正常工作。如果有人可以给我一个解决方案,或者请将我重定向到一些对我的场景有帮助的文档。如果有关于淘汰赛 Js 中可用的所有事件(内置和自定义)的某种文档,那将非常有帮助。

To be specific about the problem:

具体来说这个问题:

  data-bind="value: targetProp, event:{keyup: $parent.changeProp}"

And in Js:

在 Js 中:

    Inside parent:
     this.changeProp = function () {
                if (condition..) {
                       do something...
                }
            }

It's not working with key up. For simple solution, please give me something that will alert the length of the string that has been written inside a textbox(on every text entered and deleted). Thanks in advance.

它不适用于钥匙。对于简单的解决方案,请给我一些可以提醒文本框内写入的字符串长度的东西(在输入和删除的每个文本上)。提前致谢。

采纳答案by Joan Charmant

You can also subscribe to the changes manually.

您也可以手动订阅更改。

Make sure the targetProp is an observable, and when building the parent, subscribe manually to the changes :?

确保 targetProp 是一个可观察对象,并且在构建父对象时,手动订阅更改 :?

parent.targetProp = ko.observable(originalValue);

parent.targetProp.subscribe(function(newValue) {
    alert("The new value is " + newValue);
});


Edit: for an option binding:

编辑:对于选项绑定:

<select data-bind="options: myObservableArray, value: selectedValue"></select>

in js:

在js中:

self.selectedValue = ko.observable();

then:

然后:

self.selectedValue.subscribe(function(newValue) {
    alert("The new value is " + newValue);
});

回答by david.s

You can use valueUpdate: 'afterkeydown'which updates your view model as soon as the user begins typing a character.

您可以使用valueUpdate: 'afterkeydown'它在用户开始输入字符后立即更新您的视图模型。

data-bind="value: targetProp, valueUpdate: 'afterkeydown'"

回答by Salvador Dali

Or you can use textInputbinding from the latest KO 3.2

或者您可以使用最新的 KO 3.2 中的textInput绑定

<input data-bind="textInput: userName" />

<input data-bind="textInput: userName" />

Apart from live updates, it correctly handles cut/paste, dragging, autocomplete.

除了实时更新外,它还可以正确处理剪切/粘贴、拖动、自动完成。

回答by Ruben H. Baca

If you want to calculate in real time, as the person is typing, you can do this.

如果你想实时计算,因为这个人正在打字,你可以这样做。

HTML

HTML

<input type="text" id="description" class="form-control" maxlength="255" 
data-bind="value:description, event:{keyup:calcDescriptionCount}">
<br>
<span data-bind="text:descriptionCount"></span> charactors left.

ViewModel JS

视图模型JS

self.description = ko.observable("");
self.descriptionCount = ko.observable(255);
self.calcDescriptionCount = function(){
    this.descriptionCount(255 - $("#description").val().length);
};