如何將字符添加到JavaScript中的文本框/ textarea中的選定文本按鍵

Question

我有文本框/ textarea輸入字段，通過選擇內部的一些文本

上選擇「的Mes」並按下CTRL + B應該追加<b>（或任何字符或我所選擇的多個字符）到所選的文本子文本和最後一個消息

測試消息在以JavaScript兩端如下所示

測試<b>Mes<b>鼠尾草與子文本和最後一個消息

我能夠模擬Ctrl + B關鍵事件成功但無法用新文本替換選定的文本，請幫助。

Answer 1

你可以選擇開始和在textarea的相應字段結束。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<textarea>Test Message with sub text and last message</textarea> 
 
<script> 
 
jQuery('textarea').on('keydown', function(e) { 
 
\t if (e.keyCode == 66 && (e.metaKey || e.ctrlKey)) { 
 
\t \t e.preventDefault(); 
 

 
\t \t var text = jQuery(this).val(); 
 
\t \t var start = this.selectionStart; 
 
\t \t var end = this.selectionEnd; 
 
\t \t var selection = '<b>' + text.substring(start, end) + '</b>'; 
 
\t \t text = text.substring(0, start) + selection + text.substring(end); 
 
\t \t jQuery(this).val(text); 
 
\t \t this.selectionStart = start; 
 
\t \t this.selectionEnd = start + selection.length; 
 
\t } 
 
}); 
 
</script>

Answer 2

以下函數將選定的文本包裝在具有給定字符串的文本區域中。

我寫的情況爲例

function wrapSelection(textArea, wrappingString) { 
    var s = textArea.selectionStart; 
    var e = textArea.selectionEnd; 
    var oldValue = textArea.value; 
    var newValue = oldValue.slice(0, s) + wrappingString + oldValue.slice(s, e) + wrappingString + oldValue.slice(e, oldValue.length); 
    textArea.value = newValue; 
} 

var element = document.getElementById('your-input-element'); 
element.onselect = function() { 
    wrapSelection(element, '<b>'); 
}