无法修剪电子邮件输入中的空格

Question

我试图修剪电子邮件输入中的尾随空格，但我认为将修剪应用于电子邮件输入时存在问题。谁能解释为什么会这样，或者我的假设是否不正确。此代码在应用时适用于密码字段，但不适用于电子邮件字段。

编辑：

它是一个 Ruby on Rails 应用程序，但创建的 HTML 是这样的：

查看：

<input class="mandatory form-control form-control" id="user_email" maxlength="250" name="user[email]" required="required" type="email">
<input class="mandatory form-control form-control" id="user_password" maxlength="20" name="user[password]" required="required" type="password">

JQuery:

$('input').blur(function()
{
    this.value=$(this).val().trim();
});

我也试过这个，但仍然没有运气。它会去除文本之间的空格，但仍不会删除尾随空格：

$('input[type=email]').on('blur', function () 
{
    $(this).val($(this).val().replace(/ /g,''));
})

Answer 1

对不起，我之前发布了错误的信息。这是一个有效的js代码。

$('#user_email').bind('input', function()
{
    this.value=$(this).val().trim();
}); 

你也可以使用模糊

$('#user_email').blur('input', function()
{
    this.value=$(this).val().trim();
});

Answer 2

我发现的最佳方法是：

$(function()
{
  $('input[type=email]').on('keypress', function(e)
  {
    if (e.which == 32)
      return false;
  });
});

所有其他方法都会导致输入类型电子邮件的奇怪行为，从而导致仍显示空格。这种方法会阻止空格出现，因为电子邮件不应该有任何空格，所以它可以正常工作。

Answer 3

我对同一类型的字段和其他字段使用了 jquery 版本的“trim”，并且我能够为 Bootstrap（版本 3.xx）正确修剪它们中的所有。首先，我在所有需要修剪 leading 和 ending 空白的字段上设置了一个类（但不是“内部”空白，例如“Van Camp”）。在这个例子中称之为“nowhite”。因此，我将“nowhite”设置为我希望在表单中发生的任何字段的类，如下所示：

enter code here
<div class="form-group">
         <input type="text" class="nowhite form-control" name="firstn" id="firstn" data-error="Must Enter First Name" required>
           <div class="help-block with-errors"></div>
</div>
<div class="form-group">
         <input type="text" class="nowhite form-control" name="lname" id="lname" data-error="Must Enter Last Name" required>
           <div class="help-block with-errors"></div>
</div>

在我的 jquery 脚本中，我有这个： 在此输入代码

$('.nowhite').focusout(function(e) {
    $(this).val(  $.trim($(this).val())) ;
});

我在许多具有必填字段并且需要除空格之外的其他内容的表单上使用它。我喜欢它，因为它很短而且看起来很直观。

Answer 4

我遇到了同样的问题。尽管空间已被修剪，来自输入 type=email 的更新值并未放回其输入控件中。但是，如果您先输入不同的值，然后再将修剪后的值放回去，它确实有效。

<input type="text" value="VDWWD">
<input type="email" value="mail@domain.nl">

<script>
    $('input').bind('focusout', function () {
        var value = $(this).val().trim();

        //check for type=email and put dummy value in input
        if ($(this).prop('type') === 'email') {
            $(this).val('dummyvalue');
        }

        $(this).val(value);
    });
</script>

Answer 5

使用emailField.value 或$(emailField).val() 查询值时，该值已被修剪。来自spec：

值清理算法如下：从值中去除换行符，然后从值中去除前导和尾随 ASCII 空格。

此外，如果设置为相同的值，它不会更新显示的值。所以我们需要改变这个值，然后再把它改回来：

var trimmedValue = emailField.value;
emailField.value = '';
emailField.value = trimmedValue;

或者，使用 jQuery：

var trimmedValue = $(emailField).val();
$(emailField).val('').val(trimmedValue);