CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hiptop
Hiptop

Reputation: 79

How to get value width from input field using jQuery?

In this example i want to show an alert when input value width or cursor cross the input width. How to get value width from input field but not value length using 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>

Upvotes: 1

Views: 2163

Answers (1)

Bibhudatta Sahoo
Bibhudatta Sahoo

Reputation: 4904

You can check like this

$('.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>

Upvotes: 2

Related Questions