Getting cursor at start of value text in input on focus

Question

1.00/5 (1 vote)

See more:

Hi everyone,

I'm trying to implement a small piece of code in which when the user clicks into my search input, the text cursor automatically goes to the start of the value text. The value text is "Search Our Site...".

On key down, the value text needs to be cleared, but if the user deletes all of their text, the value text needs to reappear...

Regards,
Tom.

Posted 2-Oct-12 7:54am

thomasriley

Add a Solution

Comments

Sergey Alexandrovich Kryukov 2-Oct-12 13:57pm

Where is your cursor if you don't take care about it? Isn't it already in first position? I never heard you can control cursor in JavaScript, but are you sure you need it? Maybe you only need to set focus?
--SA

thomasriley 2-Oct-12 14:02pm

Well if the user clicks into the input, the cursor will appear at the point where the user clicks, I would like the cursor to automatically jump to the start, so that when the user starts typing, the value text automatically clears.

thomasriley 2-Oct-12 14:03pm

If you go to this website: http://www.sky.com/ you will see what I mean.

enhzflep 2-Oct-12 15:05pm

Yes, and if you look at the html, you can see that the box is actually empty!
The hint-text is contained in a separate div (the div has z-index set to -1)

I'd probably ensure the input had a transparent background, and no border. If you placed a div underneath the input, you could then control the style.visibility of the div based on the contents of the input element.

<label>
<div id="search-placeholder">Search Web</div>
<input type="text" class="search-text" autocomplete="off" value="" name="query" id="skycom-search-text" tabindex="10">
</label>

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohibur Rashid · Answer 1 · 2012-10-02T14:18:00

Solution 2

read about setselectionrange[^].

here is your function:

JavaScript

function SetCursorPos (obj, pos) 
{
        obj.setSelectionRange(pos,pos);//index started from 0
}

Posted 2-Oct-12 14:18pm

Mohibur Rashid

Updated 2-Oct-12 15:01pm

v2

enhzflep · Answer 2 · 2012-10-02T09:29:00

Further to my comment above, here's some code that demonstrates a possible solution.
Tested in Chrome.

HTML

<!DOCTYPE html>
<html>
<head>
<style>
#searchHint
{
    z-index: -1;
    position: absolute;
}
#searchBox
{
    /* border: none; */
    background-color: rgba(0,0,0,0);
}
</style>

<script>
function byId(e){return document.getElementById(e);}
function myInit()
{
    var src = byId('searchBox');
    var x,y,w,h;

    w = src.clientWidth;
    h = src.clientHeight;

    x = src.offsetLeft;
    y = src.offsetTop;

    var tgt = byId('searchHint');
    tgt.style.left = x + 'px';
    tgt.style.top = y + 'px';

    tgt.style.width = w + 'px';
    tgt.style.height = h + 'px';
}

function checkValue(element, tgtIdStr)
{
    var src, tgt=byId(tgtIdStr);

    src = element;
    if (src.value == '')
        tgt.style.display = '';
    else
        tgt.style.display = 'none';
}
</script>

</head>
<body onload='myInit();'>
    <input id='searchBox' onkeyup='checkValue(this, "searchHint");'/>
    <div id='searchHint'>Enter Search</div>
</body>
</html>