Question

我有一个绑定到淘汰模型的TextBox。现在，在TextBox中，用户可以输入“0.00”，“4.95”等成本。但是他们也可以输入这样的美元符号：“$ 50.00”和“$ 6.00”。

当用户输入美元符号时，模型会中断，因为它需要小数值。我想知道是否有一些我可以删除下面数据绑定表达式中的美元符号：

<input type="text" id="cost" data-bind="value: selectedChoiceValue" />

Answer 1

尝试转义字符串中的$。

示例：

\$5.00

Answer 2

var price = $（＆＃34; #cross＆＃34;）。val（）。replace（＆＃34; $＆＃34;，＆＃34;＆＃34;）;

但应注意，data属性是只读的。这意味着如果您在页面加载后更新数据属性中的值，然后尝试通过$（＆＃34; #costes＆＃34;）。data（＆＃34; bind＆＃34;）检索它，它将不会返回更新的值。

如果必须修改然后检索更新的数据属性，则必须使用.attr（＆＃34; data-bind＆＃34;）

Answer 3

您也可以使用

var without_dollar_sign = $("#cost").val().replace(/\$/g, '');
$("#cost").val(without_dollar_sign)

Answer 4

将字段绑定到可写的计算字段。如果验证成功，请将新值写入数字observable;如果没有，做一些错误处理。根据您的喜好，计算机的读取组件可以进行一些格式化。

＆＃13;

function toNumber(stringValue) {
  if (stringValue[0] == '$') {
    stringValue = stringValue.substr(1);
  }
  var result = parseFloat(stringValue);
  return result;
}

vm = {
  cost: ko.observable(0),
  costAsString: ko.pureComputed({
    deferEvaluation: true,
    read: function() {
      return '$' + vm.cost();
    },
    write: function(newValue) {
      var numberValue = toNumber(newValue);
      if (isNaN(numberValue)) {
        alert('Invalid number');
        var revert = vm.cost();
        vm.cost('');
        vm.cost(revert);
      } else {
        vm.cost(numberValue);
      }
    }
  })
};
ko.applyBindings(vm);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" id="cost" data-bind="value: costAsString" />
<div>Value is: <span data-bind="text: cost"></span>
</div>

＆＃13;

Answer 5

老实说，我认为最好的方法是只使用html5 number输入字段：

<input type="number" id="cost" data-bind="value: selectedChoiceValue" />

如果你想要一个淘汰赛解决方案，你可以使用像Roy J的答案那样的可观察/计算组合，或者你可以使用一个observable和subscribe and trottle：

var vm = function(){
  this.selectedChoiceValue = ko.observable('');
  
  // Just to make sure things do go crazy
  this.selectedChoiceValue.extend({ rateLimit: 10 }); // in ms
  
  this.selectedChoiceValue.subscribe(function(newValue){
    // Assuming you'll want to also parse out other invalid characters
    newValue = yourFunctionToParseTheInput(newValue);
    
    // Update this value to be the parsed valued 
    this.selectedChoiceValue(newValue);
  
  }, this);
}

function yourFunctionToParseTheInput(value) {
  return value.replace('$', '');
}

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<span class="currency">$<input type="text" id="cost" data-bind="value: selectedChoiceValue, valueUpdate:['afterkeydown']" /></span>

Restricting input to textbox: allowing only numbers and decimal point也有一些很好的方法来解析输入值。

删除敲除绑定表达式的美元符号

5 个答案: