[英]contenteditable, set caret at the end of the text (cross-browser)
Chrome 中的輸出:
<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
hey
<div>what's up?</div>
<div>
<button id="insert_caret"></button>
我相信FF它看起來像這樣:
hey
<br />
what's up?
在IE 中:
hey
<p>what's up?</p>
不幸的是,沒有好的方法可以讓每個瀏覽器插入<br />
而不是 div- 或 p-tag,或者至少我在網上找不到任何東西。
無論如何,我現在想要做的是,當我點擊按鈕時,我希望將插入符號設置在文本的末尾,所以它應該是這樣的:
hey
what's up?|
有什么方法可以做到這一點,使其適用於所有瀏覽器?
例子:
$(document).ready(function()
{
$('#insert_caret').click(function()
{
var ele = $('#content');
var length = ele.html().length;
ele.focus();
//set caret -> end pos
}
}
以下函數將在所有主要瀏覽器中執行此操作:
function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } placeCaretAtEnd( document.querySelector('p') );
p{ padding:.5em; border:1px solid black; }
<p contentEditable>foo bar </p>
將插入符號放在開頭幾乎是相同的:它只需要更改傳遞給collapse()
調用的布爾值。 下面是一個創建用於將插入符號放置在開頭和結尾的函數的示例:
function createCaretPlacer(atStart) {
return function(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(atStart);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(atStart);
textRange.select();
}
};
}
var placeCaretAtStart = createCaretPlacer(true);
var placeCaretAtEnd = createCaretPlacer(false);
不幸的是,Tim 的出色答案僅適用於最后放置,對於放置在開始時我不得不稍微修改它。
function setCaret(target, isStart) {
const range = document.createRange();
const sel = window.getSelection();
if (isStart){
const newText = document.createTextNode('');
target.appendChild(newText);
range.setStart(target.childNodes[0], 0);
}
else {
range.selectNodeContents(target);
}
range.collapse(isStart);
sel.removeAllRanges();
sel.addRange(range);
target.focus();
target.select();
}
不確定是否真的需要focus()
和select()
。
這個(實時)示例顯示了一個簡短的簡單函數setCaretAtStartEnd
,它接受兩個參數; 一個(可編輯的)節點來放置插入符號 & 一個布爾值,指示放置它的位置(節點的開始或結束)
const editableElm = document.querySelector('[contenteditable]'); document.querySelectorAll('button').forEach((elm, idx) => elm.addEventListener('click', () => { editableElm.focus() setCaretAtStartEnd(editableElm, idx) }) ) function setCaretAtStartEnd( node, atEnd ){ const sel = document.getSelection(); node = node.firstChild; if( sel.rangeCount ){ ['Start', 'End'].forEach(pos => sel.getRangeAt(0)["set" + pos](node, atEnd ? node.length : 0) ) } }
[contenteditable]{ padding:5px; border:1px solid; }
<h1 contenteditable>Place the caret anywhere</h1> <br> <button>Move caret to start</button> <button>Move caret to end</button>
如果您使用的是 google 閉包編譯器,則可以執行以下操作(從 Tim 的回答中略有簡化):
function placeCaretAtEnd(el) {
el.focus();
range = goog.dom.Range.createFromNodeContents(el);
range.collapse(false);
range.select();
}
這是 ClojureScript 中的相同內容:
(defn place-caret-at-end [el]
(.focus el)
(doto (.createFromNodeContents goog.dom.Range el)
(.collapse false)
.select))
我已經在 Chrome、Safari 和 FireFox 中對此進行了測試,但不確定 IE ...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.