knockout.js事件,用于跟踪输入文本框中的每一处文本更改

9lowa7mx  于 2022-11-10  发布在  其他
关注(0)|答案(4)|浏览(161)

我是knockout js的新手,我想在文本框中的文本每次更改时调用一个函数,我做了一些研究并实现了keyupkeydownkeypress,但它们不能正常工作。如果有人能给予我一个解决方案,或者请将我重定向到一些对我的场景有帮助的文档。如果有关于所有事件的某种文档(内置和自定义),可在击倒j,这将是真正有帮助的。
具体地说:

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

在J中:

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

对于简单的解决方案,请给予我一些东西,将提醒长度的字符串已写入文本框内(对每一个文本输入和删除)。

w1jd8yoj

w1jd8yoj1#

您可以使用valueUpdate:“afterkeydown”,它在用户开始键入字符时立即更新视图模型。

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

yc0p9oo02#

或者可以使用最新KO3.2中的textInput绑定
<input data-bind="textInput: userName" />
除了实时更新,它还能正确处理剪切/粘贴、拖动、自动完成等操作。

atmip9wb

atmip9wb3#

您也可以手动订阅变更。
确保targetProp是一个可观察对象,并且在生成父对象时,手动订阅更改:

parent.targetProp = ko.observable(originalValue);

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

编辑:对于选项绑定:

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

在js:

self.selectedValue = ko.observable();

然后:

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

ycl3bljg4#

如果要在用户输入时真实的计算,则可以执行此操作。
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.

视图模型JS

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

相关问题