Html set set set set doesn't work as expected in chrome and safari using jquery
I am trying to set the value of an html input field for a keyup event using jquery.
<input style="width: 45%;" type="text" name="user_phone" value="" placeholder="Your phone number" />
I first tried using the set.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);
}
});
});
This worked fine in firefox , but it didn't work in chrome and safari. Then, as suggested in some other questions, I tried it like this, using .prop () instead of .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);
}
});
});
The same thing happened, worked as expected in firefox , but not in safari or chrome.
source to share
It number.contains
did not provide a function in the console. So I suggest you use $.contains
as below, which works well and well!
$(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);
}
});
});
source to share
since the error in your code was pointed out by another answer, this is an alternative solution. if you want to format the number in the form (###) ### - ####, this is a solution that uses regex to first define non-digit digits, then format them based on the length of the actual digits. tested in chrome and safari. also handles deleting / backspace
also used 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" />
source to share