Question

这涉及HTML + JS和/或JQuery：

我会对之前的帖子发表评论，但我没有评论声誉或因某些原因无法发表评论。

Josh Stodola在第一部分中的优秀代码如下：

$(function() {
  var txt = $("#myTextbox");
  var func = function() {
    txt.val(txt.val().replace(/\s/g, ''));
  }
  txt.keyup(func).blur(func);
});

这很有效，除了.replace将光标放在每个keyup的字符串末尾（至少在IE8和Chrome中）。结果，它呈现左和右。右光标键没用，这在输入框内是必需的。

有没有办法增强上面的代码，以便光标键不会激活它，但是文本仍然可以动态更新？

Answer 1

更新功能：

  var func = function(e) {
    if(e.keyCode !== 37 && e.keyCode !== 38 && e.keyCode !== 39 && e.keyCode !== 40){
        txt.val(txt.val().replace(/\s/g, ''));
    }
  }

Answer 2

最佳解决方案是避免使用关键事件来捕获文本输入。他们不是这项工作的最佳工具。相反，您应该使用HTML5 oninput事件（在每个当前主要浏览器的最新版本和最新版本中都支持），并在旧版本的Internet Explorer中使用onpropertychange：

var alreadyHandled;
txt.bind("input propertychange", function (evt) {
    // return if the value hasn't changed or we've already handled oninput
    if (evt.type == "propertychange" && (window.event.propertyName != "value" 
                                                           || alreadyHandled)) {
        alreadyHandled = false;
        return;
    }
    alreadyHandled = true;
    // Your code here
});

这些事件不会触发不会导致文本输入的键 - 当你将tab转换回表单元素并且生成的keyup事件导致页面的脚本向前移动焦点时，你是不是只讨厌它再次？

关键事件的其他好处：

当按下按键时它们会立即触发，而不是在按下按键时触发，如keyup中所示。这意味着在对文本进行任何调整之前，您不会出现视觉延迟。
他们捕捉其他形式的文字输入，如拖动和放大droppping，拼写检查修正和剪切/粘贴。

进一步阅读Effectively detecting user input in JavaScript。

Answer 3

尝试：

$(function() {
  var txt = $("#myTextbox");
  var func = function(e) {
    if(e.keyCode != "37" && e.keyCode != "38" && e.keyCode != "39" && e.keyCode != "40"){
        txt.val(txt.val().replace(/\s/g, ''));
    }
  }
  txt.keyup(func).blur(func);
});

Answer 4

$(function() {
  var txt = $("#myTextbox");
  var func = function() {
    txt.val(txt.val().replace(/\s/g, ''));
  }
  txt.keyup(function(evt){
    if(evt.keyCode < 37 || evt.keyCode > 40) {
      func;
    }
  }).blur(func);
});

这样的事情应该这样做。如果键码不是37,38,39或40（四个箭头键键码），它将运行该功能。请注意，当按下任何其他键时，它实际上不会停止光标位置移动到结尾。为此，您需要跟踪当前光标位置。看一下这个link的jCaret插件，可以做到这一点

在网页上键入文本框时删除任何空格第二部分

4 个答案: