Search code examples
jqueryfirefoxtextboxmozillamaskedtextbox

Display caret position in textfield in Firefox or resize textfield as needed


There is an annoying bug in Firefox which allows me to set the caret position in a textfield, but it does not automatically scroll that caret into view.

My particular issue arises when using the jQuery Masked Input Plugin (http://digitalbush.com/projects/masked-input-plugin/)

If the width of the textfield is less than the width of the input, you cannot see what you are typing. I need a way to fix this or to force the textbox to grow.

Here's some example code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.maskedinput-1.2.2.js" type="text/javascript"></script>
<script type='text/javascript'>
jQuery(function($){
   $('#phone').mask('(999) 999-9999? ext:99999');
});
</script>
<input type="text" id="phone" name="phone" value="" width="10">

Solution

  • It's already been said, but you might try setting the size attribute of the input element either statically or dynamically.