###目的
<input type="tel">で2桁目を指定したいです。
###質問
入力値によって#resultの横幅pxを変化させたいのですが、99などを入力すると一瞬#resultが99pxになってしまいます。
最大で入力値を10に制限し、#resultも10pxに制限し、一瞬でもそれ以上になるのを防ぎたいです。
###該当のコード
こちらのコードで実装してみましたが、この書き方では一瞬#resultが10以上になってしまいます。
そこでこのような「11以上なら10にする」という制限ではなく、「2桁目には0しか入力できない」のような制限が良いのかと思い、冒頭の目的と致しました。
他にも何か良い案があれば宜しくお願い致します。
html
1<input type="tel" maxlength="2" id="target"> 2<div id="result"></div> 3<style> 4#result{background:red;height:20px;} 5</style>
javascript
1$('body').on("input keyup",'#target',function(){ 2 3 // 入力値 4 var inputVal = $(this).val(); 5 6 // 半角変換 7 var halfVal = $(this).val().replace(/[!-~]/g, 8 function (tmpStr) { 9 // 文字コードをシフト 10 return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0); 11 } 12 ); 13 14 // 数字以外の不要な文字を削除 15 $(this).val(halfVal.replace(/[^0-9]/g, '')); 16 17 // 10までに制限 18 if( inputVal >= 11 ) { 19 $(this).val('10'); 20 } 21 22 // resulthへコピー 23 var resultWidth = inputVal+'px'; 24 $('#result').css('width',resultWidth); 25 26});
回答2件
あなたの回答
tips
プレビュー