使用jQuery，HTML输入字段值设置器在Chrome和Safari中无法正常工作

Shuvro 发表于 Dev

舒夫罗

我正在尝试使用jquery在keyup事件上设置html输入字段值。

<input style="width: 45%;" type="text" name="user_phone" value="" placeholder="Your phone number" />

首先，我尝试使用.val（）setter这样。

http://jsfiddle.net/6xwzy81k/3/

$(document).ready(function(){
  $('input[name=user_phone]').keyup(function() {
    var number = $('input[name=user_phone]').val();
    if (!number.contains('(') && !number.contains(')') && number.length === 2) {            
        $('input[name=user_phone]').val('(' + number + ')');
    } else if (number.contains('(') && !number.contains(')') && number.length === 3) {
        $(this).val(number + ')');
    } else if (!number.contains('(') && number.contains(')') && number.length === 3) {
        $(this).val('(' + number);
    }
  });
});

这在Firefox中工作正常，但在Chrome和Safari中却没有用。然后，如在其他一些问题中所建议的那样，我使用.prop（）而不是.val（）尝试了这种方法

http://jsfiddle.net/6xwzy81k/2/

$(document).ready(function(){
  $('input[name=user_phone]').keyup(function() {
    var number = $('input[name=user_phone]').val();
    if (!number.contains('(') && !number.contains(')') && number.length === 2) {            
        $('input[name=user_phone]').prop('value','(' + number + ')');
    } else if (number.contains('(') && !number.contains(')') && number.length === 3) {
        $(this).prop('value', number + ')');
    } else if (!number.contains('(') && number.contains(')') && number.length === 3) {
        $(this).prop('value', '(' + number);
    }
  });
});

发生了同样的事情，它在Firefox中按预期工作，但在Safari或chrome中却没有。

古鲁帕萨德·饶

它给出number.contains的不是控制台中的功能。因此，我建议您使用$.contains以下方法，效果很好！！

此处演示

$(document).ready(function(){
    $('input[name=user_phone]').keyup(function() {
        var number = $('input[name=user_phone]').val();
        if (!$.contains(number,'(') && !$.contains(number,')') && number.length === 2) {            
            $('input[name=user_phone]').val('(' + number + ')');
        } else if ($.contains(number,'(') && !$.contains(number,')') && number.length === 3) {
            $(this).val(number + ')');
        } else if (!$.contains(number,'(') && $.contains(number,')') && number.length === 3) {
            $(this).val('(' + number);
        }
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。