输入密钥的行为在可信区间 [英] Behaviour Of Enter Key In Contenteditable Div

查看：74 发布时间：2018/6/25 17:57:19 javascript html

本文介绍了输入密钥的行为在可信区间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图制作一个富文本编辑器，而且我已经接近我的成功。我试图改变输入键在contenteditable div中的行为，因为当按下输入firefox时产生< br> 那可以，但Chrome和IE产生了一个< p> 和< div> 这里我试图强制所有浏览器生成< br> ; 时按下<进入; DIV CONTENTEDITABLE = 真 >< / DIV> 。一切工作正常在Internet Explorer中，但在所有浏览器将不得不按两次输入新行或< br> 。
$ b

这是我的代码。

 <！doctype HTML> 
< html> 
< head> 
< title>富文本编辑器< / title> 
< script type =text / javascript> 
函数预览（）{
 var textbox = document.getElementById（'textBox'）; 
 document.getElementById（view）。innerHTML = textbox.innerHTML; 
} 
函数enterKeyPressHandler（evt）{
 var sel，range，br，addedBr = false; 
 evt = evt || window.event; 
 var charCode = evt.which || evt.keyCode; 
 if（charCode == 13）{
 if（typeof window.getSelection！=undefined）{
 sel = window.getSelection（）; 
如果（sel.getRangeAt&安培;&安培; sel.rangeCount）{
范围= sel.getRangeAt（0）; 
 range.deleteContents（）; 
 br = document.createElement（br）; 
 range.insertNode（br）; 
 range.setEndAfter（br）; 
 range.setStartAfter（br）; 
 sel.removeAllRanges（）; 
 sel.addRange（range）; 
 addedBr = true; 
} 
} else if（typeof document.selection！=undefined）{
 sel = document.selection; 
 if（sel.createRange）{
 range = sel.createRange（）; 
 range.pasteHTML（< br>）; 
 range.select（）; 
 addedBr = true; 
 
 
 //如果成功，阻止浏览器默认处理按键
 if（addedBr）{
 if（typeof evt.preventDefault！=undefined ）{
 evt.preventDefault（）; 
} else {
 evt.returnValue = false; 
 
 
 
 $ b function onload（）{
 var el = document.getElementById（textBox）; 
 if（typeof el.addEventListener！=undefined）
 {
 el.addEventListener（keypress，enterKeyPressHandler，false）; 
 
 else if（typeof el.attachEvent！=undefined）
 {
 el.attachEvent（onkeypress，enterKeyPressHandler）; 
} 
} 
< / script> 
< / head> 
< body onload =javascript：onload（）;> 
< form name =myformmethod =POST> 
< div id =textBoxcontenteditable =truestyle =width：500px; height：150px; padding：20px; border：solid thin＃000>< / div> 
< / form> 
< br> 
< div id =viewstyle =width：500px; height：150px; padding：20px; border：solid thin＃000>< / div> 
< br> 
< button onClick =javascript：preview（）;>预览< /按钮> 
< / body>

演示 JSFiddle

解决方案

IT WORKS !!!

  if（window.getSelection）{var selection = window .getSelection（），range = selection.getRangeAt（0），br = document.createElement（br）; range.deleteContents（）; range.insertNode（宽单峰）; var newLine = document.createTextNode（'\\\
'）; range.setStartAfter（宽单峰）; range.setEndAfter（宽单峰）; range.insertNode（换行）; selection.removeAllRanges（）; selection.addRange（range）;}

I'm trying to make a rich text editor and i have near to my success. I'm trying to change the behaviour of enter key in contenteditable div because when pressing enter firefox produced <br> thats ok but Chrome and IE produced a <p> and <div> here i'm trying to force all browser to produce <br> when press enter under <div contenteditable="true"></div>. Everything working fine in internet explorer but in all browsers would have to press enter two times for new line or <br>.

Here is my code.

<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
<script type="text/javascript">
function preview() {
    var textbox = document.getElementById('textBox');
    document.getElementById("view").innerHTML=textbox.innerHTML;
}
function enterKeyPressHandler(evt) {
    var sel, range, br, addedBr = false;
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    if (charCode == 13) {
        if (typeof window.getSelection != "undefined") {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                br = document.createElement("br");
                range.insertNode(br);
                range.setEndAfter(br);
                range.setStartAfter(br);
                sel.removeAllRanges();
                sel.addRange(range);
                addedBr = true;
            }
        } else if (typeof document.selection != "undefined") {
            sel = document.selection;
            if (sel.createRange) {
                range = sel.createRange();
                range.pasteHTML("<br>");
                range.select();
                addedBr = true;
            }
        }
        // If successful, prevent the browser's default handling of the keypress
        if (addedBr) {
            if (typeof evt.preventDefault != "undefined") {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        }
    }
}
function onload(){
    var el = document.getElementById("textBox");
    if (typeof el.addEventListener != "undefined")
    {
        el.addEventListener("keypress", enterKeyPressHandler , false);
    }
    else if (typeof el.attachEvent != "undefined")
    {
        el.attachEvent("onkeypress", enterKeyPressHandler);
    }
}
</script>
</head>
<body onload="javascript:onload();">
<form name="myform" method="POST">
<div id="textBox" contenteditable="true" style="width:500px; height:150px; padding:20px; border:solid thin #000"></div>
</form>
<br>
<div id="view" style="width:500px; height:150px; padding:20px; border:solid thin #000"></div>
<br>
<button onClick="javascript:preview();">Preview</button>
</body>
</html

Demo JSFiddle

解决方案

IT WORKS!!!

if (window.getSelection) {
  var selection = window.getSelection(),
  range = selection.getRangeAt(0),
  br = document.createElement("br");
  
  range.deleteContents();
  
  range.insertNode(br);
  var newLine=document.createTextNode('\n');
  
  range.setStartAfter(br);
  range.setEndAfter(br);
  
  range.insertNode(newLine);

  selection.removeAllRanges();
  selection.addRange(range);
}

这篇关于输入密钥的行为在可信区间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

输入密钥的行为在可信区间 [英] Behaviour Of Enter Key In Contenteditable Div

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

输入密钥的行为在可信区间 [英] Behaviour Of Enter Key In Contenteditable Div

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭