3

我有一个不想输入空格的文本输入。如果有人键入空格或粘贴带有空格的文本，我想将文本更改回输入空格之前的状态，并保留插入符号的位置相同的。也许有一种更简单的方法可以做到这一点，但我无法弄清楚。

这是我到目前为止所拥有的：

<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/

4

2 回答 2

2

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,'');

}

两者都有，您将获得所需的效果。

我不是 100% 确定，但我相信只有 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;    
}
于 2012-10-02T19:57:30.523 回答
1

好的，我想我明白了，使用 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;}
}
于 2012-10-02T21:53:35.973 回答