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

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

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

此外，如果将显示值设置为相同的值，则不会更新显示的值。因此，我们需要更改该值，然后再将其更改回：

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

或者，使用jQuery：

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

Answer 2

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

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

您也可以使用模糊

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

Answer 3

我发现的最佳方法是：

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

所有其他方法导致输入类型电子邮件的奇怪行为导致仍然呈现空间。这种方法可以阻止空间出现，因为电子邮件不应该有任何空格，它可以按预期工作。

Answer 4

我在同一类型的字段中使用了jquery版本的'trim'，而其他字段和我能够为Bootstrap（ver 3.xx）目的正确修剪所有。首先，我在所有需要前导和结束空白修剪的字段上设置了一个类（但不是“内部”空白，就像“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 5

我有同样的问题。尽管对空格进行了修剪，但是来自输入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>

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

5 个答案: