私のコードペン: http://codepen.io/leongaban/pen/cyaAL
最大 20 文字 (国際番号の場合) を入力できる電話番号の入力フィールドがあります。
私も使っていますマスク入力 jQuery プラグインによるジョシュ・ブッシュ入力された電話番号を「きれいに」フォーマットします。
私の問題は、電話番号が 10 桁以下の場合の要件では、マスクされた入力フォーマットを使用する必要があることです。
ただし、電話番号が 10 桁を超える場合は、書式設定を削除する必要があります。
これが私の現在の状況です:コードペン携帯電話は私がこれを実現しようとしている入力フィールドです。勤務先電話番号は、マスク入力プラグイン。
この問題にどう対処しますか?
携帯電話入力フィールドの jQuery:
case '2':
console.log('created phone input');
$('.new_option').append(myphone);
$('.added_mobilephone').mask('(999) 999-9999? 9');
$('.added_mobilephone').keypress(function(event){
if (this.value.trim().length > 10) {
console.log('this.value = '+this.value.trim());
console.log('greater then 10');
$('.added_mobilephone').mask('99999999999999999999');
}
/*if (this.value.length < 9) {
console.log(this.value);
console.log('less then 10');
$('.added_mobilephone').mask('(999) 999-9999? 9999999999');
} else if (this.value.length > 9) {
console.log(this.value);
console.log('greater then 10');
$('.added_mobilephone').mask('99999999999999999999');
}*/
});
break;
ベストアンサー1
$("input[name='phone']").keyup(function() {
$(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d+)$/, "($1)$2-$3"));
});
これは確実に機能し、文字列全体を一度に適切に入力する処理を行います (例: 1234567890)。
/* example jquery use */
$("input[name='phone']").keyup(function() {
$(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d+)$/, "($1)$2-$3"));
});/* use your css to beautify the form */<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- form input for example user -->
<form>
<input type="text" name="phone" placeholder="Phone Number" />
</form>