html输入字段值设置器在使用jquery的chrome和safari中无法正常工作

Question

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

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

首先我尝试像这样使用 .val() 设置器。

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 中却没有。

Answer 1

由于其他答案指出了您的代码中的错误，因此这里是另一种解决方案。如果您想以 (###) ###-#### 的形式格式化数字，这里有一个解决方案，它使用正则表达式首先提示非数字，然后根据实际数字的长度，格式化它们。在 chrome 和 safari 中测试。还处理删除/退格

也使用了你的fiddle

$(document).ready(function(){
    
    $('input[name=user_phone]').keyup(function() {
        var number = $('input[name=user_phone]').val();
        var digits = number.replace(/[^0-9\.]+/g, '');
        var lastDigitIndex = (digits.length < 10) ? digits.length : 10;
        
        var key = event.keyCode || event.charCode; 
        
        if (key != 8 && key != 46) {
            if (digits.length >= 3) {
    
                var output = '(' + digits.substring(0, 3) + ') ';
                
                if (digits.length >= 6) {
                    output += digits.substring(3, 6) 
                        + '-' + digits.substring(6, lastDigitIndex);
                }
                else {
                    output += digits.substring(3, lastDigitIndex);
                }
                
                $(this).val(output);
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input style="width: 45%;" type="text" name="user_phone" value="" placeholder="Your phone number" />

Answer 2

它给出了number.contains is not a function in console。所以我建议你使用$.contains，如下所示，效果很好！！

DEMO HERE

$(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);
        }
    });
});