Question

我正在尝试使用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中没有。

Answer 1

因为代码中的错误是由另一个答案指出的，所以这是另一种解决方案。如果你想格式化表格中的数字（###）### - ####这里是一个使用正则表达式来首先设置非数字的解决方案，然后根据实际数字的长度，格式化它们。在铬和野生动物园测试。还处理删除/退格

也使用了您的fiddle

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 2

授予number.contains不是控制台中的功能。因此，我建议您使用$.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);
        }
    });
});

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

2 个答案: