javascript - How to set the default cursor caret in the middle of textarea/input vertically when on focus -
i wondered how use javascript/css set default cursor position in between of 2 lines of placeholder text, user input vertically centered in input field (which looks better think).
demo below
<textarea id="topic_title_input" placeholder="hi there, want cursor caret starts in middle of these 2 lines (veritcally) when onfocus"></textarea> <style> #topic_title_input{ font-size: 20; border-color: orange; color:black; background-color: white; /*text-indent:10px;*/ border:1px solid orange; width:521px; height:60px; outline:none; border-radius:3px; resize:none; padding:7px; } </style>
not quite sure you're asking fun anyway. presumes want use placeholder text , insert caret in middle. second attempt discern meant 'vertical'.
var input = document.getelementbyid('topic_title_input'); var inputspace = document.getelementbyid('topic_title_alt'); // proof of concept. blow out existing text on each focus! input.addeventlistener('focus', updatetextarea); inputspace.addeventlistener('focus', withbreak); function updatetextarea(e) { var value, pos; value = input.getattribute('placeholder'); // put anywhere want pos = value.indexof('middle'); input.value = value; // normal browsers , ie9+: input.setselectionrange(pos, pos); } function withbreak(e) { var value, pos, splitval, newval; value = inputspace.getattribute('placeholder'); // put anywhere want pos = value.indexof('middle'); newval = value.substring(0, pos) + "\r\n\r\n"; newval += value.substring(pos) inputspace.value = newval; // normal browsers , ie9+: inputspace.setselectionrange(pos + 1, pos + 1); } textarea { font-size: 20; border-color: orange; color: black; background-color: white; /*text-indent:10px;*/ border: 1px solid orange; width: 521px; height: 60px; outline: none; border-radius: 3px; resize: none; padding: 7px; } <h2>insert @ "middle"</h2> <textarea id="topic_title_input" placeholder="hi there, want cursor caret starts in middle of these 2 lines (veritcally) when onfocus"></textarea> <h2>this kind of space?</h2> <textarea id="topic_title_alt" placeholder="hi there, want cursor caret starts in middle of these 2 lines space (vertically) when onfocus"></textarea>
Comments
Post a Comment