javascript - show cursor/caret at the beginning of input box -
problem: have html text input box text in it, when user click input box, have caret/cursor appear @ beginning of input box.
i move caret using setselectionrange() function, don't effect caret shown @ end of text input box moved beginning. @ beginning of input upon shown.
example: http://jsfiddle.net/edh8mkht/1/
html
<body> <input type="text" id="myp" onmousedown="mousedown()" value="mozilla" /> </body>
js
function mousedown() { document.getelementbyid("myp").style.color = "green"; document.getelementbyid("myp").setselectionrange(0,0); }
question 1:
i use mousedown event move caret, doesn't move caret @ all, same thing happens if use onfocus event. because caret appears after 2 events , making setselectionrange has no effect?
question 2:
what's way solve problem using javascript? note: cannot use placeholder.
fiddle showing initial selection of text box
requirements work:
- have able wrap input in
label
(or element can accept child node) - have support
pointer-events
css property - you have able move firing event
input
label
html
<label for="myp" onclick="click();"> <input type="text" id="myp" value="mozilla" /> </label>
css
input#myp { pointer-events: none; }
javascript
function click() { var input = document.getelementbyid("myp"); input.style.pointerevents = 'auto'; input.style.color = "green"; input.setselectionrange(0,0); console.log('click'); }
important things consider in implementation:
- it's essential protect css selector element type. in case, it's
input#myp
opposed#myp
. otherwise, css select bothlabel
,input
in browsers iffor
attribute specified. - you have apply style element label, otherwise won't work.
- your caret point before initial value when clicked. @ least in chrome. that's part of problem
setselectionrange
call. i'd have research figure out why is.
Comments
Post a Comment