I need to emulate the missing "maxlegth" attribute in "textarea" fields but all my Google searches either lead to obsolete scripts that overwrite the "value" property (thus losing caret position) or to complex solutions that work on top of specific frameworks.
Do you have some reference on how to do it? I'd like to make it work in at least Firefox and IE 6 and 7.
> <script type="text/javascript"> > function cutLength(e,el,max) > { > if(el.value.length>max) > { > return false; > }else{ > return true; > } > } [...] > <textarea onkeypress="return cutLength(event,this,100)"></textarea> -- [...] > ...How ever, this wont stop people cutting and pasting in over the > limit, it will only stop people when typing normally.
It's an idea but it needs quite polishing: in Firefox, once you hit the limit you can't use the arrow keys or delete with keyboard. And the clipboard issue would be a problem :( Anyway, thanks for the hint.
I can think of two approaches:
1. Listening to textarea events: if an event will result in value being changed, then cancel the event.
2. Good old "if value too large then cut value" with caret position handling: save position, cut text and restore position.
> > <script type="text/javascript"> > > function cutLength(e,el,max) > > { > > if(el.value.length>max) > > { > > return false; > > }else{ > > return true; > > } > > } > [...] > > <textarea onkeypress="return cutLength(event,this,100)"></textarea> -- > [...] > > ...How ever, this wont stop people cutting and pasting in over the > > limit, it will only stop people when typing normally.
> It's an idea but it needs quite polishing: in Firefox, once you hit the > limit you can't use the arrow keys or delete with keyboard. And the > clipboard issue would be a problem :( Anyway, thanks for the hint.
> I can think of two approaches:
> 1. Listening to textarea events: if an event will result in value being > changed, then cancel the event.
> 2. Good old "if value too large then cut value" with caret position > handling: save position, cut text and restore position.
<script type="text/javascript"> function getCaretPosition (ctrl) { var caretPos = 0; if (document.selection) { ctrl.focus (); var Sel = document.selection.createRange (); Sel.moveStart ('character', -ctrl.value.length); caretPos = Sel.text.length; } else if (ctrl.selectionStart || ctrl.selectionStart == '0') { caretPos = ctrl.selectionStart; } return caretPos;
}
function setCaretPosition(ctrl, pos) { if(ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); }
}
function checkMax(element, max) { var caretpos = getCaretPosition(element); var value = element.value; if (value.length > max) { value = value.substring(0, max); } element.value = value; setCaretPosition(element, caretpos);
function cutLength(e, el, max) { return el.value.length <= max }
is unlikely to be worth considering.
-- (c) John Stockton, nr London UK. ?...@merlyn.demon.co.uk Turnpike v6.05 MIME. Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links. Check boilerplate spelling -- error is a public sign of incompetence. Never fully trust an article from a poster who gives no full real name.
> <script type="text/javascript"> > function getCaretPosition (ctrl) { > var caretPos = 0;
[...]
It works badly in IE 6. However, it contains some good ideas. If I can't find a prewritten script and I have to write mine, I'll take them into account.
<alvaroNOSPAMTHA...@demogracia.com> wrote: > Tom Cole escribió:> This doesn't work?
> > <script type="text/javascript"> > > function getCaretPosition (ctrl) { > > var caretPos = 0;
> [...]
> It works badly in IE 6. However, it contains some good ideas. If I can't > find a prewritten script and I have to write mine, I'll take them into > account.
<script> function textLimit(field, maxlen) { if (field.value.length > maxlen) { field.value = field.value.substring(0, maxlen); // if the length is more than the limit (maxlen) then take only the first 'maxlen' no. of characters } return (maxlen - field.value.length); // current value length is returned back
> function textLimit(field, maxlen) > { > if (field.value.length > maxlen) > { > field.value = field.value.substring(0, maxlen); // if the length > is more than the limit (maxlen) then take only the first 'maxlen' no. > of characters > } > return (maxlen - field.value.length); // current value length is > returned back > } > </script>
