Question

我希望阻止用户输入空格，以及在粘贴包含空格的文本时删除空格。

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

在下面的代码中，它可以防止输入空格并删除粘贴上的空格，但输入中的光标总是向右移动，阻止您在开始时更改字符，除非您只删除所有字符并重新键入。 / p>

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

http://jsfiddle.net/tgtdrk2o/

Answer 1

为了实现这一目标，我们首先需要定义一些函数。我使用过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;
});

在此处查看此行动：http://jsfiddle.net/t2a0xa5d/

要解释我在这里做了什么：我已经定义了两个函数getCursorPosition和setCursorPosition，它们用于查找插入（修改过的）粘贴文本的位置，并返回到粘贴后正确的光标位置。

这种方法有一些缺点。我们通过调用event.preventDefault()基本上重新发明了粘贴轮，因此某些功能不可用。例如，在输入框中键入一些文本，选择它，然后粘贴一些东西。您可能希望替换所选文本，但事实并非如此。然而，如果需要的话，应该相当简单地添加该功能。

防止文本输入和复制粘贴的输入空间

1 个答案: