Question

我有一个文本输入，我不想要空格。如果有人键入空格或用空格粘贴文本，我想将文本更改回输入空格之前的内容。保持插入位置相同。也许有一种更简单的方法可以做到这一点，但我无法弄明白。

这是我到目前为止所做的：

<html><head><title>Test</title></head><body>

<input type=text id="inputText" value="testValue" onInput=doIt(this);>

</body></html>

将包含的javascript（我使用jsFiddle）：

var editedValue = "testValue";

// alert(editedValue);

function doIt(that)
{

var caretPos = that.selectionStart;

if (that.value.indexOf(" ") != -1)
{
that.value = editedValue;
// alert(caretPos);
that.selectionStart = caretPos;
}
else
{
editedValue = that.value;
}

}

似乎一切正常，除非，如果插入符号在文本的中间，并且您键入或粘贴空格，则插入符号不会返回到原始位置。

任何人都可以帮我解决这个问题吗？或者向我展示一种全新的/更简单/更简单的方法，不允许输入空格或粘贴到文本输入中？

以下是我尝试使用的jsfiddle，如果它有帮助：http://jsfiddle.net/djSnL/4/

Answer 1

http://jsfiddle.net/djSnL/5/

您想捕获onkeydown事件：

function doIt(e)
{
    var e = e || event;

    if (e.keyCode == 32) return false; // 32 is the keycode for the spacebar

}

window.onload = function(){
    var inp = document.getElementById("inputText");

    inp.onkeydown = doIt;
};

请注意，它们仍然可以将空格粘贴到输入中，因此您也必须处理它。

要处理粘贴，它就像：http://jsfiddle.net/djSnL/7/

一样简单

function pasteIt(e)
{
    var e = e || event;

    this.value = this.value.replace(/\s/g,'');

}

使用两者，您将获得所需的效果。

我不是百分百肯定，但我相信只有webkit浏览器会在粘贴之前让您知道数据是什么：http://jsfiddle.net/djSnL/8/

function pasteIt(e)
{
    var e = e || event;
    var data = e.clipboardData.getData("text/plain");

    if (data.match(/\s/g)) return false;    
}

Answer 2

好吧，我认为我使用jQuery得到了它。谢谢你的帮助！

//绑定事件

function bindEvents()
{
$(inputText).bind('keydown paste', checkForSpaces);
}

//检查空格

function checkForSpaces()
{
if (event.type == "keydown" && event.which == 32) {return false;}
if (event.type == "paste" && event.clipboardData.getData('text/plain').indexOf(" ") != -1) {return false;}
}

禁止键入或粘贴到文本输入中的空格，并保持文本和插入位置相同

2 个答案: