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

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -