Как я могу вставить элемент на каретку по событию keydown? - PullRequest
Новая
       36

Как я могу вставить элемент на каретку по событию keydown?

0 голосов
/ 09 апреля 2020

эта функция не работает, но если я установил точку останова в devtools, она будет работать успешно, почему? так странно ...... 

function insertHtmlAtCursor() {
  var range=window.getSelection().getRangeAt(0);
  var node = range.createContextualFragment("<div>this is not show</div>");
  range.insertNode(node);
}

но если я изменю код на этот, он всегда будет работать правильно. 

  var node = document.createTextNode('this is ok.');

я использую chrome в макросах, здесь это демо: 

editor.onkeydown=editinput;
function editinput(e) {
  if(e.isComposing||e.keyCode===229) {
    return;
  }
  if(e.keyCode==32) {//space
  var range=window.getSelection().getRangeAt(0);
    var node=range.createContextualFragment('ttttttttttt');
    range.insertNode(node);
  }
}
<div id="editor" contenteditable="true" class="knowleadge" tabIndex="1">
</div>

Это демо, когда я вводю пробел, он не будет вставлять фрагмент, но когда я отлаживаю в chrome, он будет вставлять фрагмент.

теперь, спасибо @Dekel, я знаю, что keyup replace keydown - это решение, но поскольку мне нужно разобраться с tab, а keyup не может реально поймать клавишу tab, поэтому мне нужно разобраться с кодом в keydown, как я могу сделать это?

и я считаю, что settimeout может решить эту проблему, но есть ли другое решение? вот установленное время ожидания: 

if(e.keyCode==32) {//space
    setTimeout(dealpace,0);
    e.stopPropagation(); 
    e.preventDefault();  
}
function dealpace() {
    var range=window.getSelection().getRangeAt(0);
    var node=range.createContextualFragment('ttttttttttt');
    range.insertNode(node);
}

спасибо @Dekel, settimeout не является ключевым, ключ - e.preventDefault (); как говорят @Dekel, keydown вставляет текст, но keyup заменяет текст пробелом. поэтому нам нужен e.preventDefault (); как это: 

 if(e.keyCode==32) {//space
    dealpace();
    e.stopPropagation(); 
    e.preventDefault();  
    }
 function dealpace() {
    var range=window.getSelection().getRangeAt(0);
    var node=range.createContextualFragment('ttttttttttt');
    range.insertNode(node);
 }

1 Ответ

1 голос
/ 09 апреля 2020

Похоже, что оба прекрасно работают: 

function insertHtmlAtCursor1() {
  var range=window.getSelection().getRangeAt(0);
  var node = range.createContextualFragment("<div>this is not show</div>");
  range.insertNode(node);
}
function insertHtmlAtCursor2() {
  var range=window.getSelection().getRangeAt(0);
  var node = document.createTextNode('this is ok.'); 
  range.insertNode(node);
}
.container {
  border: 1px solid black;
  background: #fefefe;
}
<div class="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

<button onClick="insertHtmlAtCursor1()">Function 1</button>
<button onClick="insertHtmlAtCursor2()">Function 2</button>

Вы уверены, что используете его правильно?
В чем проблема?

...