Question

在用户新闻Ctrl+Enter时,我要插入一个新的行文。

Based on the following questions, I wrote the code below:

这里是我的超文本:

<span id="myInput" contenteditable="true" style="white-space: pre;"></span>

Here本:

let myInput = document.getElementById( myInput );

myInput.addEventListener( keypress , (event) => {
    if (event.key ==  Enter  && event.ctrlKey == true) {
    event.preventDefault();
    this.insertNewLine();     
   }
})


function insertNewLine(text) {

    var sel, range, html;
  sel = window.getSelection();
  range = sel.getRangeAt(0);
  range.deleteContents();
    
  // Do not always works
  var textNode = document.createTextNode("
");
  
  // Always works
  //var textNode = document.createTextNode("
u200b");
    
  range.insertNode(textNode);
  range.setStartAfter(textNode);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
}

当用户新闻Ctrl+Enter时,行为是:

On Chrome, the new line is not always inserted
On Firefox, the new line is inserted, but the caret does not jump to the next line

I noticed that the above code always works when an zero-width space (u200b) is added after the character.

I made a JSFidle: https://jsfiddle.net/Alphonsio/atr7e2uw/27/

Of course, I d prefer not to insert the second character. But I can t figure out why the new line is not inserted in the first case ( only). Can anyone help?

Answer 1

Use < BR /> instead of

document.querySelector("button").addEventListener("click", function() {
  let s = document.querySelector("span");
  console.log("text: " + s.innerHTML);
  //s.textContent = "<br/>" + s.textContent;
  s.innerHTML = "<br/>" + s.innerHTML;
});

span {
  contenteditable: true;
  whitespace: pre;
}

<button>Click me</button>
<p contenteditable=false>ZZZ
<span contenteditable=true>ABC</span>
</p>

Answer 2

探讨你的问题

//js

        set(6);
        myInput.focus();
        
        myInput.onkeyup   = e=>{
        
                if(!(e.key== Enter &&e.ctrlKey))return;
            
              e.preventDefault();
              
              var pos               = get();
              
              var str               = myInput.textContent;
              var newstr            = str.slice(0,pos)+ 
 +str.slice(pos);
              myInput.textContent   = newstr;
              
              set(pos+1);
              
        }//onkeyup
        
        function get(){
          
              return window.getSelection().focusOffset;
              
        }//get
        
        function set(pos){
          
              var txt               = myInput.firstChild;
              var range             = document.createRange()
              range.setStart(txt,0);
              range.setEnd(txt,pos);
              range.collapse(false);
              
              var selection         = window.getSelection();
              selection.removeAllRanges();
              selection.addRange(range);
              
        }//set

        
/*css*/
        
        #myInput {
              display       : block;
              border        : 1px solid black;
              padding       : 5px;
              width         : 300px;
              height        : 200px;
              white-space   : pre;
        }

<!--html-->            
        
        <p>Type some characters and press Ctrl+Enter</p>
        
        <span id=myInput contenteditable=true>12345678</span>

i 主要是使用黄色,除 cur子在护堤尾时外,所有工程似乎都是一种浏览器,用各种元素进行审判,所有工程都是相同的。

如果你删除它开始工作的特性,试图与它一道玩弄。

如果你选择使用一个文本,那么它就会发挥作用,而且你可以公正使用。

    var pos                 = myInput.selectionEnd;
    var str                 = myInput.value;
    myInput.value           = str.slice(0,pos)+ 
 +str.slice(pos);
    myInput.selectionEnd    = pos+1;

我们现在想到的是,浏览器总是对白色空间和内容的终结感到微不足道的,即便是白天空间的固定,他们也只是热爱瓦解白空间。

在html的任何内容中使用新线的罚款,如果是html规格的一个基本部分,一个期限只是一个线性要素。

你们使用一段时期,然后将其展示变成一个障碍,这实际上使它成为一夫一妻。

i 现在这样说,一心一意就会失去我的ed子,也就是说,在这个问题上还有一些建议。

友情链接