Why should contentEditable = true the cursor inside the div get it? This article https://blog.csdn.net/qq_33769914/article/details/85002918 because we know you want to insert a new content in a content which, if this is a new content segment html code. The last show there is a pattern. So with input it can not be achieved.
Therefore, we consider the use of contentEditable = div true. There is no problem in html input of friends.
----------------
Disclaimer: This article is CSDN bloggers' summer think "original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source and this link statement.
Original link: https: //blog.csdn.net/qq_33769914/article/details/93596502
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> and acquires the focal position of the specified content is inserted at the focal position </ title>
</ head>
<body>
<div contenteditable="true" class="fxAnswer" οnblur="getblur()"></div>
<input type = "text" id = "text" placeholder = " content you want to add into the" />
<the Button of the type = "the Button" the above mentioned id = "btn"> Add </ button>
<Script type = "text / JavaScript" the src = "JS / jquery.min.js"> </ Script>
<Script type = "text / JavaScript">
var SEL, Range;
var textContent;
obtaining cursor // loses focus position
function getblur () {
SEL = window.getSelection ();
Range = sel.getRangeAt (0);
range.deleteContents ();
}
In complex formulas // div contenteditable = true position of focus and insert content acquisition
function insertHtmlAtCaret (HTML) {
IF (window.getSelection) {
// IE9 and non-IEs
IF (sel.getRangeAt && sel.rangeCount) {
var EL document.createElement = ( "div");
el.innerHTML = HTML;
var = document.createDocumentFragment the frag (), Node, lastNode;
the while ((Node = el.firstChild)) {
lastNode = frag.appendChild (Node);
}
range.insertNode (the frag);
// the Preserve The Selection
IF (lastNode) {
range.cloneRange = Range ();
range.setStartAfter (lastNode);
range.collapse (to true);
sel.removeAllRanges ();
sel.addRange (Range);
}
}
} the else IF (&& document.selection.type the document.selection ! = "Control") {
// IEs <. 9
document.selection.createRange () pasteHTML (HTML);.
}
textContent = $ ( "fxAnswer.") HTML ();. // this is also very important. Because if you do not write the original contents cover might replace you add. Or simply do not show up. textContent is a global variable is what you type.
}
// If the default does not get the focus, you go to write directly add content may point error. Because he did not go to lose focus function. sel and range has not been defined yet. It will error. Add $ ( "fxAnswer.") Focus ();. The default sentence so that he would get the focus will be able to resolve this error.
// If you go to first focus on the editable div, to lose focus at this time sel and the range has been assigned, and no problem.
// $ ( "fxAnswer.") focus ().;
$("#btn").click(function(){
textContent=$("#text").val();
insertHtmlAtCaret(textContent)
})
</script>
</body>
</html>
Directly on the code.
Their content is inserted into the input position of the cursor.
Before you enter the content you want to insert triggers editable div loses focus event. The cursor position on access to. Then, when you insert content directly place the cursor just lost it. So here sel and range are global variables. insertHtmlAtCaret this function in directly with the sel and range is defined loses focus.
----------------
Disclaimer: This article is CSDN bloggers' summer think "original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source and this link statement.
Original link: https: //blog.csdn.net/qq_33769914/article/details/93596502