jQuery move cursor to end of text input

Question

Currently I have an input box which has the value "Current Website"

When they click it I run this function:

function clearMeHttp(formfield) {
    if (formfield.defaultValue == formfield.value) {
        formfield.value = "http://";
    }
};

It works fine if you click into the box, but if you tab into the box it just highlights the word "http://" which defeats the purpose of it unless they hit the right arrow key which I want to avoid.

Thanks!

Here's the other code: <input onblur="restoreMe(this)" onfocus="clearMeHttp(this)" type="text" class="fade" name="website" value="Current website">

restoreMe just fades default value back in gently with jquery

i m not sure but you have to use setselectionrange fucntion for this. — Pathik Gandhi, Sep 01 '11 at 08:55

Marc Uberstein · Accepted Answer · 2011-09-01T10:31:06.663

4

I have changed your code a bit, but uses jquery events instead of inline html.

Full script used:

var defaultVal = 'Current website';
$(function() {

    $('.urlCheck').focus(function(e) {
        if ($(this).val() == "http://" || $(this).val() == '' || $(this).val() == defaultVal) {
            $(this).val('http://');
            $(this).select(false);

        }
    });

    $('.urlCheck').keyup(function(e) {
        if ($(this).val() == "http://" || $(this).val() == '' || $(this).val() == defaultVal) {
            $(this).val('http://');
        }
    });

    $('.urlCheck').blur(function(e) {
        $(this).val(defaultVal);
    });

});

Working Link : http://jsfiddle.net/29gks/6/

The keyup event is the override for Chrome and Safari

edited Sep 01 '11 at 10:31

answered Sep 01 '11 at 09:06

Marc Uberstein

12,501
3
44
72

Let me know if it's working for you.. busy looking at a working deselect solution for Chrome/Safari. – Marc Uberstein Sep 01 '11 at 09:45
is it possible just to imitate the right arrow function once they tab into the box and after it displays the http://? I dont mind if they can delete it or any of that (if they really wanted to they could backspace it). as long as its not highlighted im happy. disabling tab isnt ideal – Tallboy Sep 01 '11 at 09:52
:) That is actually what I am looking at currently. Will let you know ASAP. – Marc Uberstein Sep 01 '11 at 09:56
I have updated my answer. Using a keyup event and setting the value fixed the Chrome/Safari issue. – Marc Uberstein Sep 01 '11 at 10:05

score 0 · Answer 2 · answered Sep 01 '11 at 09:03

You haven't use jquery so I follow you.

script:

function clearMeHttp(formfield) {
    if (formfield.defaultValue == formfield.value) { 
         formfield.value="";        
         formfield.style.padding="0 0 0 40";
         document.getElementById("http").style.display="block";
    }
};

html:

<label id="http" style="float:left;position:absolute;display:none;">http://</label>
<input onblur="restoreMe(this)" onfocus="clearMeHttp(this)" type="text" class="fade" name="website" value="Current website">

That catch your requirement but may be not the way you want

sorry, i tagged jquery because I thought there may be a function built into there to make it easy. unfortunately I'm already using a lot of labels so it would have to be without that method. — Tallboy, Sep 01 '11 at 09:06

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

You need to use setSelectionRange() (or selectionStart and selectionEnd) on most browsers and some TextRange shenanigans on IE < 9.

Here's my previous answer to the same question: How to place cursor at end of text in textarea when tabbed into

edited May 23 '17 at 11:43

Community

1
1

answered Sep 01 '11 at 10:03

Tim Down

318,141
75
454
536

jQuery move cursor to end of text input

3 Answers3

Linked