In a text input, if text exists, and you click to add more the cursor automatically jumps to the start. It seems to only happen in IE.
I've been googling this for a while now and tried loads of examples that I found but nothing seems to be working. Unfortunately, the input is written in a jsp which I don't have control over and I think the only reason I have this problem is because there is some javascript hard coded in there.
<input type="text" id="simpleSearchString" class="text" onfocus="javascript:this.value=this.value.replace(/^\s+|\s+$/g,'')" onblur="javascript:this.value=this.value.replace(/^\s+|\s+$/g,'')" value="" maxlength="255" name="searchCriteria.simpleSearchString">
All I want to do really is remove this jump.
I thought adding the following code would have helped but didn't seem to do anything:
jQuery("input#simpleSearchString").focus();
I'm not 100% sure what dev are trying to achieve with the 'javascript:this...etc' but maybe I could find a way of removing it.
You could kill those inline events and plug in your own;
var el = $("#simpleSearchString");
el[0].onfocus = el[0].onblur = null;
$(el).on("focus blur", function(e) {
this.value = $.trim(this.value);
if ((e.type === "focus") && this.createTextRange) {
var r = this.createTextRange();
r.moveStart("character", this.value.length);
r.select();
}
});
(This assumes its only IE that requires you to reposition the caret)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With