Question

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.

Answer 1

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)