如何将 html 标签包裹在输入中选择的文本周围？

Question

问题是：我有一个输入文本类型元素，旁边有一个按钮。

单击按钮后，输入框内的选定文本必须用 html 元素换行。例如，当点击按钮时，选中的文本用 <span style='color:red'></span> !

换行

有人有解决办法吗？

Answer 1

有人问过类似的问题 here。您可以使用 JQuery select 方法 (here) or the JS selection method (here)。然后用 HTML 包装块替换 selection。

Answer 2

正如@RémyJ 所写，您可以使用 jQuery select 事件来获取选择。试试这个：

var start, end;
$('#tf').select(function(e) {
    start = e.target.selectionStart;
    end = e.target.selectionEnd;
});

$('.wrap').click(function() {
    var val = $('#tf').val();
    var newVal = val.substr(0, start) + '!' + val.substr(start, (end-start)) + '!' + val.substr(end);
    $('#tf').val(newVal);
});

HTML:

<input type="text" id="tf"> 
<button type="button" class="wrap">wrap</button>

http://jsfiddle.net/qh95xyeq/

如何将 html 标签包裹在输入中选择的文本周围？

How to wrap a html tag around a text selected in an input?

html

javascript

forms

jquery

input