Как написать символ, где курсор находится с виртуальной клавиатурой? - PullRequest
Новая
       76

Как написать символ, где курсор находится с виртуальной клавиатурой?

1 голос
/ 21 января 2020

Я работаю над живым HTML редактором. Это в основном для мобильных пользователей. Итак, я сделал виртуальную клавиатуру с тегами HTML. Однако я столкнулся с проблемой: клавиатура печатает теги только в конце другого тега. Так что это не работает так, как я хочу.

Вот код. 

(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();
})();
<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>

С этим кодом я могу печатать только после последнего напечатанного символа. Но я хочу, чтобы это было так (| означает положение курсора), 

An|ant

Здесь я написал An до ant.

Но он печатает это так: 

ant An|

Что я могу сделать, чтобы решить проблему?

1 Ответ

1 голос
/ 21 января 2020

Я думаю, что вы ищете, это selectionStart Вы можете использовать его в основных браузерах
, чтобы вы получили начальную точку (а не просто добавление в конец строки) того, куда добавить ваш 

.value += this.value.toLowerCase();

вы можете просто использовать его так: 

var input = document.getElementById('text');
var caretPosition = input.selectionStart;

// Check if there is a Selection in your input
if (input.selectionStart != input.selectionEnd)
{
   var selectionValue =
   input.value.substring(input.selectionStart, input.selectionEnd);
}
...