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

Interactively, don't allow the first character in a text input to be a space, or group of spaces

本文关键字：空格 字符 第一个 一组 一个 输入 方面 交互 文本 许文本      更新时间：2023-09-26

首先，这不是一个重复问题。我遇到的大多数类似的问题，都没有交互式地执行期望的动作(例如:"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

返回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

但是，这将允许您键入非空格，然后将备份到字段的开头并插入空格。
修改后的fiddle会在您输入时修剪前导空格，但这也不能完全解决问题。

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努力让我输入一个"合法"字符串。

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

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

JSFiddle

感谢@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

。

相关文章：