如何使用jQuery從輸入字段獲取值寬度？

Question

在此示例中，我想在輸入值寬度或光標越過輸入寬度時顯示警報。 如何使用jQuery從輸入字段獲取值寬度而不是值長度？

 $('.value_width').text($('.input').val().length); //this is just length of value but not value width $('.input_width').text($('.input').width()); $('.input').keyup(function(){ $('.value_width').text($(this).val().length); //this is just length of value but not value width }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="input" name="" value="Example Text" /> <p/> Value width : <span class="value_width"></span> <br/> Input width : <span class="input_width"></span> 

Answer 1

你可以這樣檢查

 $('.value_width').text($('.input').val().length); $('.input_width').text($('.input').width()); $('.input').keyup(function(){ $('.value_width').text($(this).val().length); if(22<=$(this).val().length){ alert('length filled'); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="input" name="" value="Example Text" /> <p/> Value width : <span class="value_width"></span> <br/> Input width : <span class="input_width"></span>