CODEWITHSUNDEEP
javascripthtmltextcursor-positionvirtual-keyboard
adib
adib

Reputation: 41

How to change the cursor position in a text-area?

I'm working on a live HTML editor. It's basically for mobile users. So I've made a virtual keyboard which has the HTML tags. But I'm facing a problem & that is :: The keyboard only prints the tags at the end of another tag. So it isn't working as I want.

Here is a demo code.

    <body>

    <div id="keyboard" class="show">

    <div>
    <input type="button" value="Q">
     <input type="button" value="W">
     .........
     <input type="button" value="V">
     <input type="button" value="B">
     <input type="button" value="N">
     <input type="button" value="M">
    </div><div>
     <input id="back" type="button" value="&#8592;">
     <input id="space" type="button" value=" ">
     <input id="clear" type="reset" value="clear">
    </div><div>
    <label>Track Search</label> - <input id="text" type="text">
    </div>

    <!-- #keyboard --></div>

    <script>
    (function() {
      'use strict';
       var i, c, t, delay = 5000, kb = document.getElementById('keyboard');
    /* get all the input elements within the div whose id is "keyboard */
       i = kb.getElementsByTagName('input'); 
    /* loop through all the elements */   

    for(c = 0;c < i.length; c++) {
    /* find all the the input type="button" elements */
    if(i[c].type === 'button') { 
    /* add an onclick handler to each of them  and set the function to call */
       i[c].addEventListener('onclick',makeClickHandler(c));
       }
     }

    /* this is the type="reset" input */
       document.getElementById('clear').addEventListener('click',
       function() {
    /* remove all the characters from the input type="text" element */
     document.getElementById('text').value = '';
       },false);

    function makeClickHandler(c) {
        i[c].onclick=function() {
    /* find the non-text button  which has an id */
    if(i[c].id === 'back') {
    /* remove last character from the input the type="text" element using regular expression */
        document.getElementById('text').value =
        document.getElementById('text').value.replace(/.$/,'');
     }
    /* find the text buttons */
    else {
    /* add characters to the input type="text" element */
        document.getElementById('text').value+= this.value.toLowerCase();
       }
      };
     }
      document.onmousemove = resetTimer;
      document.onkeypress = resetTimer;

    function logout() {
     kb.classList.remove('show');
     kb.classList.add('hide');
     }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(logout, delay)
         }
       resetTimer();
    })();
    </script>

    </body>

With this code I can only print after the last printed character. But I want like that [Here '|' means the cursor],

<div><p id=".."><img src=".." />|<p/></div>

But it prints like this

<div><div><p><p><img src=".." />|

So what can I do to solve the problem?

Upvotes: 0

Views: 498

Answers (1)

jeremy-denis
jeremy-denis

Reputation: 6878

if you want to put cursor 5 characters before the end of your text area content

var myTextArea = document.getElementById("text");
var end = myTextArea.selectionEnd;
myTextArea.focus();
myTextArea.selectionEnd = end + 5;

Upvotes: 1

Related Questions