Question

我有一个asp文本框，我想设置一个javascript函数，只允许人们输入超过小数点2位数的十进制值。例如：

43432131 - good

54525582.23 - good

3423.3 - good

.23 - good

45573490.343 - bad

34.34.34 - bad

345..23 - bad

你明白了。我有一个带有正则表达式的现有函数。

    function fnCurrencyOnly(o) {
        var sValue = o.value;
        var sKey = String.fromCharCode(window.event.keyCode);

        if (document.selection.createRange().text == sValue) {
            sValue = sKey;
        }

        else {
            sValue = sValue + sKey;
        }

        var re = new RegExp("^\\d+(?:\\.\\d{0,2})?$");
        if (!sValue.match(re))
            window.event.returnValue = false;
    }

然后我用

将c＃代码设置为我的按钮

    private void AddAttributes()
    {
        txtRate.Attributes.Add("onkeypress", "fnCurrencyOnly(this)");
    }

只要您从头到尾输入整数，这就有效。但是，如果您有100.00例如，并将光标放在1和0之间并且键入2，尝试使值1200.00（这是完全有效的）它不会让您输入2.原因在javascript函数中，它执行svalue + skey的操作，它只是将你输入的内容添加到最后。所以在这种情况下它实际上是在验证100.002，这当然是错误的。我无法找到一种方法来检查按键的值是什么，并检查它与正则表达式。我知道我可以在keyup上执行此操作，但是如果它无效则如何恢复到旧值？

Answer 1

我找到了自己的答案：

    function doGetCaretPosition(oField) {
        // Initialize
        var iCaretPos = 0;

        // IE Support
        if (document.selection) { 
            oField.focus(); // Set focus on the element
            var oSel = document.selection.createRange(); // To get cursor position, get empty selection range
            oSel.moveStart("character", -oField.value.length); // Move selection start to 0 position
            iCaretPos = oSel.text.length; // The caret position is selection length
        }

        // Firefox support
        else if (oField.selectionStart || oField.selectionStart == "0") {
            iCaretPos = oField.selectionStart;
        }

        // Return results
        return (iCaretPos);
    }

    function fnCurrencyOnly(o) {
        var sValue = o.value;
        var sKey = String.fromCharCode(window.event.keyCode);
        var pos = doGetCaretPosition(o);

        if (document.selection.createRange().text == sValue) {
            sValue = sKey;
        }
        else {
            sValue = sValue.substr(0, pos) + sKey + sValue.substr(pos);
        }

        var re = new RegExp("^\\d+(?:\\.\\d{0,2})?$");

        if (!sValue.match(re))
            window.event.returnValue = false;
    }

自： https://codinglifestyle.wordpress.com/2009/04/24/currency-textbox-with-javascript/#comment-2064

完美无缺，但您仍然可以在框中复制和粘贴无效内容。将尝试为下一个找到解决方案。

Answer 2

最近，我想防止在使用正则表达式检查值时出现无效的按键操作，并提出了用于处理粘贴和选择替换的方法：

function updateOk(e) {
  var k
  if (e.clipboardData) k = e.clipboardData.getData('text/plain')
  else k = String.fromCharCode(!event.charCode ? event.which : event.charCode)
  const start = e.target.selectionStart
  const end = e.target.selectionEnd
  const v = e.target.value
  const n = v.slice(0, start) + k + v.slice(end)

  if (!/^\d+(?:\.\d{0,2})?$/.test(n)) {
    e.preventDefault()
  }
}

输入元素

<input type="text" onkeypress="updateOk(event)" onpaste="updateOk(event)"
  placeholder="number with 2 digits"/>

JSFiddle here

Javascript函数只允许在键入时允许文本框中包含2个小数点的十进制数

2 个答案: