Javascript 防止文本输入和复制粘贴时输入中出现空格

我想防止用户在粘贴包含空格的文本时输入空格和删除空格

防止从键盘输入空格很容易，但我在从粘贴中删除空格时遇到问题，因为我希望能够使用箭头键移动到输入的任何部分并更改文本，而且我还需要立即完成，而不是在输入失去焦点时

在下面的代码中，它阻止输入空格并在粘贴时删除空格，但输入中的光标始终向右移动，阻止您更改开头的字符，除非您删除所有字符并重新键入

 <input type="text">

$("input").on("keydown", function (e) {
    return e.which !== 32;
});

$('input').keyup(function(){
    str = $(this).val()
    str = str.replace(/\s/g,'')
    $(this).val(str)
});

$（“输入”）。在（“键控键控”下，函数（e）{
返回e.which！==32；
});
$（'input'）.keyup（函数（）{
str=$（this.val（）
str=str.replace（/\s/g''）
$（this）.val（str）
});

---

为了实现这一点，我们需要先定义几个函数。我使用了jQuery：

// We need this function if text is pasted arbitrarily.    
$.fn.getCursorPosition = function() {
    var input = this.get(0);
    if (!input) return; // No (input) element found
    if ('selectionStart' in input) {
        // Standard-compliant browsers
        return input.selectionStart;
    } else if (document.selection) {
        // IE
        input.focus();
        var sel = document.selection.createRange();
        var selLen = document.selection.createRange().text.length;
        sel.moveStart('character', -input.value.length);
        return sel.text.length - selLen;
    }
};

// This function will allow us to return to the proper cursor position after a paste.
$.fn.setCursorPosition = function(pos) {
  return this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
};

$('#nospace').bind('paste', function(event){
    event.preventDefault();
    var clipboardData = event.originalEvent.clipboardData.getData('text/plain');
    str = clipboardData.replace(/\s/g,'');
    var currentCursorPos = $(this).getCursorPosition();
    var output = [$(this).val().slice(0, currentCursorPos), str, $(this).val().slice(currentCursorPos)].join('');
    $(this).val(output);
    $(this).setCursorPosition(currentCursorPos + str.length);
}); 

$('#nospace').bind('keydown', function(event){
    return event.which !== 32;
});

请在此处查看它的实际操作：

为了解释我在这里所做的工作：我定义了两个函数，

getCursorPosition

和

setCursorPosition

，用于查找插入（修改）粘贴文本的位置，并在粘贴后返回到正确的光标位置

---

这种方法有一些缺点。我们基本上是通过调用

event.preventDefault（）

来重新发明粘贴轮，因此有些功能不可用。例如，在输入框中键入一些文本，选择它，然后粘贴一些内容。您可能希望替换选定的文本，但事实并非如此。但是，如果需要，将该功能添加回去应该相当简单。

您最好保存光标相对于左上角的位置，然后在删除空格后，计算光标现在的位置，然后将其移回。使用onpaste事件，不是键控。请记住，还有其他方法可以在输入中获取文本，而不会触发键控或粘贴。例如，打开记事本，突出显示一些文本，单击并将其拖动到网页上的文本框中（在IE11中测试）。据我所知，唯一的触发事件是

oninput