Question

点击按钮后，文本应添加到textarea。但是，如果我使用+=，则会在textarea的值末尾添加文本。我希望在点击按钮后，文本会被添加到我正在写的部分。我希望你能理解这个问题：）

还有另一个问题：文本添加到textarea后，应该选择添加文本的一部分。像这样： [b] boldText [/ b] - 这是添加的文字。现在脚本应该选择＆＃39; boldText＆＃39;。

我不在此网站上使用jQuery！

嗯，到目前为止这是我的脚本（不是整个脚本）：

(...) <script>
function insertBold () {
    document.form2.content.value += "[b]boldText[/b]";
}
</script> (...)
<div class="formatBtn" onClick="insertBold()"><b>B</b></div>
<form name="form2>
<textarea style="width:100%; height:300px; font:Arial, Helvetica, sans-serif !important;" type="text" placeholder="Inhalt" name="content"></textarea><br><br>
</form> (...)

Answer 1

您可以执行以下操作。它会将文本添加到光标位置

你的HTML：

  <textarea id="txt" rows="10" cols="30">There is some text here.</textarea>

你的jquery

<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn" value="OK" />

这是jsfiddle http://jsfiddle.net/cb97z2fk/

的链接

Answer 2

您不能将textareas用作富文本编辑器。你不能使一些文字粗体和其他文字不。这是全有或全无。

但您可以添加文字并选择它。我添加了两个按钮，一个用于添加文本并选择它，另一个用于添加“[b]文本[/ b]”并选择“文本”。

PURE JS - JSFIDDLE： http://jsfiddle.net/seadonk/x3wkkqh4/3/
JQUERY - JSFIDDLE： http://jsfiddle.net/seadonk/x3wkkqh4/

PURE JS

(function () {
    var btn = document.getElementById('formatBtn');
    btn.onclick=function(){insertAndSelect();};
    var btn2 = document.getElementById('formatBtnBolded');
    btn2.onclick=function(){insertAndSelectBolded();};
})();

function insertAndSelect() {
    var textarea = document.getElementById('content');    
    var texttoinsertvalue = document.getElementById('textToInsert').value;
     var selectionStart = textarea.value.length;   
    textarea.value = textarea.value + texttoinsertvalue;
    var selectionEnd = textarea.value.length;
    selectRange(textarea,selectionStart, selectionEnd);
}

function insertAndSelectBolded() {
    var textarea = document.getElementById('content');    
    var texttoinsertvalue = document.getElementById('textToInsert').value;
     var selectionStart = textarea.value.length+3;   
    textarea.value = textarea.value + '[b]'+texttoinsertvalue+'[/b]';
    var selectionEnd = textarea.value.length - 4;
    selectRange(textarea,selectionStart, selectionEnd);
}

function selectRange(e, start, end){       
    if (!e) return;
    else if (e.setSelectionRange) { e.focus(); e.setSelectionRange(start, end); } /* WebKit */ 
    else if (e.createTextRange) { var range = e.createTextRange(); range.collapse(true);
    range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */
    else if (e.selectionStart) { e.selectionStart = start; e.selectionEnd = end; }
}

<强> JQUERY

$().ready(function () {
    $('#formatBtn').click(function () {
        insertAndSelect();
    })    
    $('#formatBtnBolded').click(function () {
        insertAndSelectBolded();
    })
});

function insertAndSelect() {
    var textarea = $('#content');
    var selectionStart = textarea.val().length;
    textarea.val(textarea.val() + $('#textToInsert').val());
    var selectionEnd = textarea.val().length;
    textarea.selectRange(selectionStart, selectionEnd);
}

function insertAndSelectBolded() {
    var textarea = $('#content');
    var selectionStart = textarea.val().length+3;
    textarea.val(textarea.val() + '[b]'+$('#textToInsert').val()+'[/b]');
    var selectionEnd = textarea.val().length-4;
    textarea.selectRange(selectionStart, selectionEnd);
}

//use this function to set the range.
$.fn.selectRange = function(start, end) {
    var e = document.getElementById($(this).attr('id'));
    if (!e) return;
    else if (e.setSelectionRange) { e.focus(); e.setSelectionRange(start, end); } /* WebKit */ 
    else if (e.createTextRange) { var range = e.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */
    else if (e.selectionStart) { e.selectionStart = start; e.selectionEnd = end; }
};

将文本添加到textarea并使用javascript进行标记

2 个答案: