добавление текста в текстовой области с помощью горячих клавиш и javascript - PullRequest
Новая
       54

добавление текста в текстовой области с помощью горячих клавиш и javascript

0 голосов
/ 29 марта 2020

У меня есть 4 тега ввода текста и 4 тега textarea, и мне нужно создать несколько горячих клавиш, таких как Ctrl + n, Ctrl + r и Ctrl + o, чтобы добавить предопределенные слова в позиции курсора для всех текстовых полей.

Я получил этот скрипт, но он предназначен только для события onclick, поэтому я хочу показать пользователю только один раз текст (нажмите Ctrl + n для word1, Ctrl + r для word2 и Ctrl + o для word3), затем он может вставить эти слова каждый раз, когда он печатает какой-то текст независимо от того, какое поле он имеет. 

    <script>
    function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("txt1").value += targ.textContent || targ.innerText;
    }
    </script>
    <div onclick="addText(event)">word1</div>
    <div onclick="addText(event)">word2</div>
    <div onclick="addText(event)">word3</div>

        <label><b>Text 1: </b></label><br>
        <textarea rows="20" cols="80" id = "txt1" name="txt1"></textarea>

        <label><b>Text2: </b></label>
        <input type="text" size="69" name="txt2" value="">

1 Ответ

1 голос
/ 29 марта 2020

Вы можете использовать что-то вроде этого.
Обратите внимание, что я использовал недоиспользуемые клавиши специально, поскольку определенные комбинации управляющих клавиш зарезервированы только для использования браузером и не могут быть перехвачены клиентской стороной JavaScript на веб-странице. (например, ctrl+N или ctrl+T). 

const arrKey = ['a', 'l', 'b'],
  arrVal = ['addedA', 'addedL', 'addedB'];

function addText(event) {
  if (event.target.classList.contains("addtext")) {
    const index = arrKey.indexOf(event.key);
    if (event.ctrlKey && index != -1) {
      event.preventDefault();
      insertAtCaret(event.target, arrVal[index]);
    }
  }
}

function insertAtCaret(el, text) {
  const caretPos = el.selectionStart,
    textAreaTxt = el.value,
    newCaretPos = caretPos + text.length;

  el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
  el.setSelectionRange(newCaretPos, newCaretPos);
};

document.addEventListener('keydown', addText);
<label><b>Text 1: </b></label><br>
<textarea placeholder="Try ctrl+a or ctrl+b" rows="10" cols="40" id="txt1" name="txt1" class="addtext"></textarea><br/>
<label><b>Text 2: </b></label><br/>
<input type="text" size="40" name="txt2" class="addtext" value=""><br/>
<label><b>Text 3: </b></label><br>
<textarea rows="10" cols="40" id="txt3" name="txt1" class="addtext"></textarea><br/>
<label><b>Text 4: </b></label><br/>
<input type="text" size="40" name="txt4" class="addtext" value="">
...