交互地，不允许文本输入中的第一个字符是空格或一组空格

Question

第一，这不是一个重复的问题。大多数类似的问题，我遇到过，并没有预先设定期望的交互行动(例如"onkeydown"，"onkeyup"，等等)。我需要一个纯JavaScript (即NO jQuery__)函数，以不允许基于文本的输入的第一个字符是一个空间或一组仅给出元素ID的空格。

<script type="text/javascript">

/* Don't allow the first character of a "text-based" input element
 * (e.g. text-box, text-area, editable-div's) to be a space, given
 * the elements ID ([ eID ]). [BEGIN]
 */

function noPrecedingSpace ( eID )
{

    var elmt = document.getElementById(eID);

    elmt.addEventListener("keydown", function(event)
    { 
        var strg = elmt.value;
        var lastChar = strg.charAt(strg.length - 1);

        if ((lastChar == " ")||(lastChar == "&nbsp;")||(strg == ""))
        {
            return event.which !== 32;
        };
    }); 

};

/* Don't allow the first character of a "text-based" input element
 * (e.g. text-box, text-area, editable-div's) to be a space, given the
 * elements ID ([ eID ]). [END]
 */

</script>

对于为什么这不起作用有什么想法吗？

我做错了什么？

请注意：“粘贴”已经入账，另一个javascript不允许它出现在字段上，顺便说一句，它运行得很好。

JSFiddle

Answer 1

返回true/false是管理事件传播的“旧”方法。现在更好的做法是使用preventDefault()

var elmt = document.getElementById('noSpaces');

elmt.addEventListener('keydown', function (event) {
    if (elmt.value.length === 0 && event.which === 32) {
        event.preventDefault();
    }
});

这只是支票..。如果当前输入长度为零，则不允许使用空格。

还可以看到小提琴。

您也可以添加/修改以检查不间断空格，如果这确实是一个问题--与Dave的答案一样的正则表达式匹配，但前提是elmt.value.length是> 0。

然而，这将允许您键入非空格，然后回到字段的开头并插入空格。

当您键入时，修正小提琴会修剪前面的空格，但这也不能完全解决问题。

var elmt = document.getElementById('noSpaces');

elmt.addEventListener('keydown', function (event) {
    if (event.which === 32) {
        elmt.value = elmt.value.replace(/^\s+/, '');
        if (elmt.value.length === 0) {
            event.preventDefault();
        }
    }
});

即使考虑到当前的插入符号位置和当前选定的文本，您也可以继续改进它，但是最终您必须 .trim()您在服务器上接收的字符串，因为我(例如)可以发送我想发送的任何东西，尽管您所有的javascript努力让我输入一个“合法”字符串。

Answer 2

您可以使用正则表达式测试输入的值，以查看它是否以空格开头，如果是，则从值的开头删除空格；

var input = document.getElementById('noSpaces');

input.addEventListener('keyup', function(event) {
   if(/^\s/.test(input.value)) {
     input.value = input.value.replace(/^\s+/,'');   
   }
});

JSFiddle

Answer 3

多亏了@StephenP，我找到了这个最终的答案，这完全符合我的需求("visitors_name“字段)：

<script type="text/javascript">

/* Don't allow the first character of a "text-based" input element (e.g. text-box, text-area, editable-div's, etc.) to be a space, given the elements ID ([ eID ]). Also, don't allow more than one space between adjacent words. [BEGIN] */
/* Usage Example: noPrecedingOrDoubleSpace ("visitors_name"); */

function noPrecedingOrDoubleSpace ( eID )
{

var elmt = document.getElementById(eID);

elmt.addEventListener("keydown", function(event)
{ 
var strg = elmt.value;
var lastChar = strg.charAt(strg.length - 1);

if ((lastChar == " ")||(lastChar == "&nbsp;")||(strg == ""))
{
if (event.which === 32)
{
event.preventDefault();  
};
};
});

};

/* Don't allow the first character of a "text-based" input element (e.g. text-box, text-area, editable-div's, etc.) to be a space, given the elements ID ([ eID ]). Also, don't allow more than one space between adjacent words. [END] */

</script>

请记住，如果您只是不需要空间，只有在输入开始时，@StephenP的答案可能更实用，并且是这个问题的真正答案，给出标题。

还请记住，正如@StephenP所提到的，真正的验证最好是在服务器端脚本(例如php)中完成。这个JavaScript只是为了鼓励正确的输入格式。没有更多，没有更少。

@StephenP

谢谢!

最终JSFiddle。