我有一個文本區域，我動態地向它添加資料，它作業正常。我想要實作的是在附加資料后無法更改（編輯）資料但在資料的最后一個元素之后用戶可以開始在 textarea 上鍵入。我在想也許計算字串資料的長度設定只讀到那部分。我怎樣才能做到這一點？任何幫助表示贊賞。提前致謝。
有關視覺示例，請查看本網站的終端：https : //www.online-python.com/
function test() {
x = 'this is a string to be appended to text area'
document.getElementById("textArea").value = x;
}<textarea id="textArea"></textarea>
<button onclick="test()">Append</button>uj5u.com熱心網友回復：
您可以添加一個keydown事件偵聽器，用于檢查 是否selectionStart小于 textarea 值的長度減去附加字串的長度：
let x = 'this is a string to be appended to text area'
var hasAppended = false;
function test() {
hasAppended = true
document.getElementById("textArea").value = x;
}
textArea.addEventListener('keydown', function(e) {
if (hasAppended) {
if (this.selectionStart > this.value.length - x.length && this.selectionStart != this.value.length) {
e.preventDefault()
e.stopPropagation()
}
}
})<textarea id="textArea"></textarea><button onclick="test()">Append</button>uj5u.com熱心網友回復：
不可能有選擇地標記<textarea>只讀的部分，但是，可以使用contenteditable元素實作類似的效果：
function test() {
const x = 'this is a string to be appended to text area'
const span = document.createElement('span')
span.appendChild(document.createTextNode(x))
span.setAttribute('contenteditable', 'false')
document.getElementById("textArea").appendChild(span);
}#textArea{
border: 1px solid black;
height: 50px;
}<div id="textArea" contenteditable="true"></div>
<button onclick="test()">Append</button>但是，這仍然允許用戶洗掉只讀塊，或在它之前寫入。
uj5u.com熱心網友回復：
這幾乎有效。
但是如果你 CTRL a 然后退格，它會洗掉文本。雖然它會在下一次擊鍵時回傳，但它并不那么直觀。
它還要求只讀字串以 a 結尾space，這非常難看。
也許你可以改進它。
window.onload = function() {
document.getElementById('textArea').addEventListener('keydown', function (e){
var readOnlyLength = parseInt(document.getElementById("textArea").getAttribute('data-readOnlyLength') );
var currentLength = parseInt(document.getElementById("textArea").value.length );
if (readOnlyLength >= currentLength ) {
document.getElementById("textArea").value = document.getElementById("textArea").getAttribute('data-readonly') ;
}
}, false);
};
function test() {
x = 'this is a string to be appended to text area '
document.getElementById("textArea").value = x;
document.getElementById("textArea").setAttribute('data-readonly' , x);
document.getElementById("textArea").setAttribute('data-readOnlyLength' , x.length);
}<textarea id="textArea"></textarea>
<button onclick="test()">Append</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360494.html
標籤：javascript html
上一篇：在Svelte中，有沒有辦法在不改變狀態的情況下撤消無效的用戶輸入？
下一篇：顯示年初至今