Question

我正在尝试使用KnockoutJS创建一个文本框，该文本框在文本框的开头包含一些只读文本，然后允许在该只读文本之后进行编辑。我该怎么办？

这是我尝试过的代码段

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();

    var field = document.getElementById('waNumberField');
    var readOnlyLength = field.value.length;

    field.addEventListener('keydown', function (event) {
        var which = event.which;
        if (((which == 8) && (field.selectionStart <= readOnlyLength)) 
            || ((which == 46) && (field.selectionStart < readOnlyLength))) {
            event.preventDefault();
        } 
        else {
            // field.unbind('keydown');
            //return true;
        }
    });
}

Answer 1

我创建了jsfiddle https://jsfiddle.net/u1jn8mqh/，您可以在其中看到预期的输出。这样对吗？在HTML部分中，有一个简单的HTML输入，该输入具有数据绑定类型“ textInput”（请参见http://knockoutjs.com/documentation/textinput-binding.html的更多信息）。

BUTTON.onclick = myFunction;

function ViewModel() {
  this.readOnlyText = "+1";
  this.editableText = ko.observable();
  this.value = ko.observable(this.readOnlyText);
  
  this.value.subscribe(function (newValue) {
    if((newValue.length < this.readOnlyText.length) || 
      (newValue.indexOf(this.readOnlyText) != 0)) {
    	this.value(this.readOnlyText);
        this.editableText("");
        return;
    }
    
    this.editableText(newValue.substring(this.readOnlyText.length, (newValue.length)));
  }, this);
}
ko.applyBindings(new ViewModel());

ViewModel也非常简单。有三个变量。 readOnlyText-字符串的一部分，为只读。 editableText-一个可观察值，其中包含一个可编辑文本的值。值-一个可观察值，其中包含整个文本框的值。

变量值有一个订阅，我在其中检查条件，并在需要时设置变量值和editableText。

Answer 2

不要本地绑定输入及其行为，您应该允许敲除使用适当的敲除框架来处理它。您需要的是一种特殊的可观察类型，称为computedObservable。实际上，您要做的就是为其读/写行为提供自定义方法

创建一个VM，将其绑定到您的html，在您的输入上添加一个简单的值绑定，并在您的VM中定位一个可观察对象，将其称为userInput;

因此在您的VM中：

this.userInput = ko.observable('');

 this.userInputComp = ko.pureComputed({
            read: function () {
                return "This always stays here " + this.userInput();
            },
            write: function (value) {
                this.userInput(value);
            },
            owner: this
        });

然后将数据绑定应用于您的输入，如下所示：

data-bind="value: userInputComp "

可以找到更多的东西here

如何使用Knockoutjs / HTML属性将文本框部分设为只读？

2 个答案: