在下面的示例中，請將游標放在任何行的開頭并按下Tab鍵
這作業正常
如果一次選擇多行并且如果Shift Tab按下也洗掉一個選項卡我想要相同
可能我需要一組選定的行但不知道如何獲得它們
請幫助
$('#wrap').on('keydown', function(e){
if(e.keyCode === 9){
e.preventDefault();
var range = window.getSelection().getRangeAt(0);
var tab = document.createTextNode("\u00a0");
range.insertNode(tab);
range.setStartAfter(tab);
}
});.wrap{padding:0 14px 9px 14px; white-space:pre-wrap; background:orange; outline:none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable>
lorem ipsum
dolor sit
amet
</div>uj5u.com熱心網友回復：
考慮以下。
$('#wrap').on('keydown', function(e) {
if (e.keyCode === 9) {
e.preventDefault();
var sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
var range = window.getSelection().getRangeAt(0);
var tab = document.createTextNode("\t");
if (range.collapsed) {
range.insertNode(tab);
range.setStartAfter(tab);
} else {
var content = range.toString(),
count = (content.match(/\n/g) || []).length,
start = 0,
end = content.indexOf("\n");
range.deleteContents();
var newContent = document.createDocumentFragment();
for (var i = 0; i <= count; i ) {
newContent.append("\t" content.substring(start, end));
if (i != count) {
newContent.append("\n");
}
start = end 1;
end = content.indexOf("\n", start);
if (end == -1) {
end = content.length;
}
}
range.insertNode(newContent);
}
}
}
});.wrap {
padding: 0 14px 9px 14px;
white-space: pre-wrap;
background: orange;
outline: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable>
lorem ipsum
dolor sit
amet
</div>在這里，您可以看到我們檢查選擇的位置。如果它只是一個單行，沒有選擇或折疊，那么我們只需\t在該行的前面添加一個制表符 ( )。如果是多行，那么我們需要在選擇的每一行中添加一個制表符。
這意味著我們需要定義一條線，因此從行首到行尾 (EOL)，通常是回車 ( \r) 和換行 ( \n)，有時只是換行。如果我們尋找換行符，我們確保可以找到每一行。
因此，如果選擇是：
lorem ipsum\r\n
dolor sit
您需要以下輸出：
\tlorem ipsum\r\n
\tdolor sit
首先，我們找到所有的 Lines 并得到一個count，這樣我們就可以迭代每個 Lines 并附加 Tab 字符。我們收集每一行，對其進行修改，并將其放入一個檔案片段中以供以后輸入。根據需要，我們將換行符添加回來。
如果你想使用一個陣列，那么.split("\n")這將是一個很好的方法。
$('#wrap').on('keydown', function(e) {
if (e.keyCode === 9) {
e.preventDefault();
var range = window.getSelection().getRangeAt(0);
var content = range.toString().split("\n");
range.deleteContents();
var newContent = document.createDocumentFragment();
$.each(content, function(i, line) {
newContent.append("\t" line);
if (i != (content.length - 1)) {
newContent.append("\r\n");
}
});
range.insertNode(newContent);
}
});.wrap {
padding: 0 14px 9px 14px;
white-space: pre-wrap;
background: orange;
outline: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable>
lorem ipsum
dolor sit
amet
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/485359.html
標籤：javascript jQuery 标签 内容可编辑
上一篇：獲取二維陣列中的最高元素