如何在输入框中移除空格并重新分配修剪值

Question

我正在进行电子邮件验证；在电子邮件字段中，用户可能会输入空格。

因此，我决定使用$trim修剪输入值并重新分配到输入字段。

它正常工作没有任何问题，但当我使用空格键几次并从输入框中移出焦点然后再回来时，输入的空格还在输入框中。

尽管我每个input都进行了修剪，但我不知道为什么空格还在input字段中。

请问有正确的方法吗？

这是我的尝试：

$('#email').on('input change',function(){
    this.value = $.trim(this.value); //re-assigning trimmed value, but not works when enterning space and focus out. when focus in the space being in the input
    validateEmail.init(this.value);
    if(validateEmail.done()){
        console.log('this is correct');
    }
});

//enter some space and focus out, then come back to input field you can see white spaces in the field

演示现场

- 3gwebtrain

---

你真的需要删除输入框中的每个空格吗？为什么不在传递给电子邮件验证时修剪它呢？(validateEmail.init($.trim(this.value));) - padarom

在火狐浏览器中运行良好，但在谷歌浏览器中不起作用。 - imbondbaby

我想基本上避免空格，因为这是电子邮件地址。用户还可以复制粘贴一些不需要的空格... 这在输入字段中变得非常冗长。 - 3gwebtrain

现在代码已更新，可以处理开头和结尾的多个空格，并将所有空格都删除。请尝试使用此功能... - Devendra Soni

Answer 1

嘿，我看了你的例子。

我改变了绑定并且它按照预期工作。

$('#email').on('keyup  change',function(){

     var text = $.trim($(this).val() )
     this.value="";      
     this.value=text;

    validateEmail.init(this.value);
    if(validateEmail.done()){
        console.log('this is correct');
    }
});

工作示例：-http://jsfiddle.net/SG6YN/10/

现在，如果用户尝试粘贴带有空格的文本，则会删除这些空格。

谢谢

- Devendra Soni

---

所以，根据您的说法，“输入”有问题？我尝试了一下，并没有像预期的那样工作。请在Chrome浏览器中测试。 - 3gwebtrain

嘿，我已经更新了代码...你现在可以检查它，它将删除开头和结尾的所有空格。 - Devendra Soni

是的，它有效。我使用Rohand的想法更新了您的代码，就像这样：var value = $.trim(this.value).replace(/\s+/g,''); - 运行良好。 - 3gwebtrain

Answer 2

限制用户在字段中输入空格。

$('#email').keydown(function(e) {
        if (e.keyCode == 32) // 32 is the ASCII value for a space
            e.preventDefault();
    });

但是如果用户复制并粘贴包含空格的文本，则不起作用。因此，请在您的onChange函数中添加以下代码。

$('#email').on('input change',function(){
    $(this).val($(this).val().replace(/\s+/g, ''));
    validateEmail.init(this.value);
    if(validateEmail.done()){
        console.log('this is correct');
    }
});

工作的代码片段在这里

- Roshan

---

尝试在开头添加多个空格并将其粘贴到文本框中，它将无法正常工作... - Devendra Soni

它运行良好。我在Chrome和Mozilla中进行了测试。在哪个浏览器中它不工作？ - Roshan

在Chrome中尝试使用try这个关键词：" text "（忽略其开头和结尾的"，即开头和结尾都有三个空格）。 - Devendra Soni