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

Remove Any Spaces While Typing into a Textbox on a Web Page Part II

本文关键字：删除 任何 第二部分 空格 网页 文本      更新时间：2023-09-26

这涉及HTML+JS和/或JQuery:

我本来会对之前的帖子发表评论，但我没有评论声誉，或者由于某种原因无法发表评论。

Josh Stodola在第一部分中的伟大代码如下：

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

这很好，除了.replaces将光标放在每个按键的字符串末尾(至少在IE8和Chrome中是这样(。结果，它渲染了左&右光标键无用，这是在输入框内需要的。

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

最好的解决方案是避免使用关键事件来捕获文本输入。它们不是这份工作的最佳工具。相反，您应该使用HTML5 oninput事件(在当前所有主要浏览器的最新版本和最新版本中都支持(，并在旧版本的InternetExplorer:中使用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中那样在抬起按键时开火。这意味着在对文本进行任何调整之前，不会出现视觉延迟
  • 它们捕获其他形式的文本输入，如拖动&滴管、拼写检查器更正和剪切/粘贴

进一步阅读有效检测JavaScript中的用户输入。

更新函数：

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

try:

$(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);
});

$(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(四箭头键代码(，它将运行该函数。请注意，当按下任何其他键时，它实际上不会停止光标位置移动到末尾。为此，您需要跟踪当前光标的位置。看看这个jCaret插件的链接，它可以完成

相关文章：