js 退格键并计算有多少个数字

Question

我有这个代码用于计算输入的数字数

var tnnod=0;
function telephone(e) {
    if (tnnod<10) {
        var key;
        var keychar;

        if (window.event) {
            key = window.event.keyCode;
        }
        else if (e) {
            key = e.which;
        }
        else {
            return true;
        }
        keychar = String.fromCharCode(key);

if ((key==null) || (key==0) || (key==8) ||  (key==9) || (key==13) || (key==27) ) {
   return true;
}
else if ((("0123456789").indexOf(keychar) > -1)) {
    tnnod+=1;
   return true;
}
else if (keychar == "-") { 
  return true;
}
else
   return false;
}
    else
        return false
}

，但是每次按退格键时如何从计数器中删除 1 并且删除的字符是数字而不是“-”

我尝试过将 key == 8 获取到做某事，但由于某种原因按退格键并没有真正返回任何内容，

这可能是什么问题？

Answer 1

您不必专门检测退格键。试试这个：

var tn_count = 0;
function telephone(ev) {
  var el = document.getElementById("telephone_number");

  if(tn_count < 10) {
    var key, keychar;
    if(window.event) {
      key = window.event.keyCode;
    } else {
      key = ev.which;
    }

    keychar = String.fromCharCode(key);
  }

  if(!keychar.match(/\d|-/)) {  // only allow digits or "-"
    return false;
  }

  // clean up any non-digit chars that get in here somehow
  el.value = el.value.replace(/[A-Za-z]+/, '');
  tn_count = el.value.replace("-",'').length; // get the digit length
  return true;
}

这里的基本区别在于，不是每次按键时加 1，而是将 tn_count 更新为字段中所有数字字符的总数。为了安全起见，您可能可以进行更多清理，但这应该可以帮助您开始。

Answer 2

我认为为类似的事情计算击键次数是一个坏主意。我们正在讨论文本字段的输入，对吧？如果用户从剪贴板粘贴某些字符串，您会怎么做？如果他用鼠标标记一些文本并将其删除怎么办？用一个字符替换它？

我认为仅查看文本字段中的文本并（如有必要）进行一些摆弄以确保语法正确会更有意义。让用户输入他想要的任何内容，如果您发现垃圾字符，您可以将文本替换为不包含这些字符的文本。此时您还可以修剪字段（没有前导或尾随空格）。此外，准确跟踪长度变得就像询问从字段返回的字符串的长度一样简单。

Answer 3

一些想法 -

1. 是否可以使用 3 个字段而不是 1 个？然后您可以稍后添加破折号。
2. 如果您想使用当前的方法，您可以保留已输入的破折号的计数器。然后，在每次击键时，检查还剩下多少个破折号。如果与之前的计数不同，您就知道他们已经删除了破折号。
3. 我认为它需要更强大一点。如果他们在字符串中的奇怪位置添加破折号怎么办？
4. 您还可以阻止用户输入所有非数字字符并在每个分隔点插入破折号。因此，在输入 3 和 6 数字后插入破折号。

Answer 4

您可以计算字符串的长度并使用该值吗？像下面这样：

function getLen(el) {
    return el.value.replace('-', '').length;
}

alert(getLen(document.getElementById('telephone_number')));