Có thể chỉnh sửa đầu vào văn bản bằng javascript và thêm vào ngăn Hoàn tác không?

Question

Có cách nào để chỉnh sửa nội dung của input hoặc textarea bằng javascript và có thể hoàn tác thay đổi đó bằng lệnh "hoàn tác" của trình duyệt (ví dụ: ctrl-Z) không?

Tôi đang cố gắng chèn một chuỗi, chẳng hạn như "Foo {0} bar", vào giá trị tại lựa chọn và nếu người dùng đã chọn phạm vi, phạm vi được chọn sẽ được chèn vào chuỗi thay cho "{0}". Ví dụ: nếu vùng văn bản chứa "Example 1 2 3" và con trỏ ở "Example 1 | 2 3", thì hàm sẽ thay đổi giá trị thành "Example 1Foo blah bar 2 3" (valueIfNothingSelected là "blah " trong trường hợp này). Nếu phạm vi "1 2" được chọn, thay vào đó, hàm sẽ thay đổi giá trị thành "Ví dụ Foo 1 2 thanh 3".

Trong Chrome, tôi đã thử nghiệm chức năng này và nó hoạt động như thế nào, nhưng tôi không thể đảo ngược thay đổi với undo.

function insertTextAtCursor(text, valueIfNothingSelected) { 
    var field = $('textarea[name="task_log_description"]')[0]; 
    var startPos = field.selectionStart; 
    var endPos = field.selectionEnd; 
    var processedText; 
    if (startPos == endPos) { 
     processedText = text.replace('{0}', valueIfNothingSelected); 
     field.value = field.value.substring(0, startPos) + processedText + field.value.substring(endPos, field.value.length); 
     field.selectionStart = startPos + text.indexOf('{0}'); 
     field.selectionEnd = field.selectionStart + valueIfNothingSelected.length; 
    } else { 
     var selectedText = field.value.substring(startPos, endPos); 
     processedText = text.replace('{0}', selectedText); 
     field.value = field.value.substring(0, startPos) + processedText + field.value.substring(endPos, field.value.length); 
     field.selectionStart = startPos + text.indexOf('{0}'); 
     field.selectionEnd = field.selectionStart + selectedText.length; 
    } 
    field.focus(); 
} 

Answer 1

Tôi tìm thấy một giải pháp mà làm việc tại https://stackoverflow.com/a/10345596/1021426

Bằng cách thay thế "field.value = ..." dòng với:

document.execCommand("insertText", false, processedText); 

... và di chuyển "field.focus() "trước dòng đó, tôi đã có thể đạt được chức năng hoàn tác/làm lại mà tôi mong muốn.