Results 1 to 1 of 1
Feb 1, 2011, 01:35 #1
- Join Date
- Dec 2003
- 7 Post(s)
- 0 Thread(s)
Highlight part of text in input field
In a web application I want to add a cool effect for text input fields - instead of limiting length with maxlength I want to dynamically highlight the part of text that exceeds the maximum length. So far I have tried this method:
<div id="highlight"> This field<span class="out-of-range"> should have 10 characters max</span> </div> <input type="text" value="This field should have 10 characters max">
This works pretty well except one problem: when I enter more text than the field is able to contain then its content is scrolled by the browser and I need to adjust the position of the highlight accordingly. This needs to work in Safari and Firefox.
First I tried the scrollLeft property on the input element. Apparently it works only in IE, other browsers just return 0 regardless of how much text I enter.
However, it turns out that scrollLeft works very well across all browsers on textarea elements. So if I could make textarea fields appear and behave exactly as text input fields I would be able to replace them with js and all would work perfectly. This is as far as I could get in achieving this:
I want to achieve one of the following in Safari and FF:
1. get the horizontal scrolling position of text inside input field
2. make textarea behave like input field
I can also implement a completely different solution if it works well. And for usability reasons I don't want to emulate form fields -I want real form fields so all the standard features work like tab navigation, copy by drag&drop, spell check (if a browser provides), etc.