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

Question

The problem is: I have an input text type element, and a button beside it.

Once the button is clicked, the selected text inside the input must wrap with a html element. For example, when the button is clicked, the selected text wrapped with <span style='color:red'></span> !

Does anyone has any solution ?

Not 100% sure what you mean by "wrap with a html element". Can you give an example of before and after? — Simon Catlin, Mar 28 '15 at 13:39
Sorry guys , i had written a html tag in the question that, which didn't show. i edited now, so any misunderstanding of question may clear now ! — Amin Akhyani, Mar 28 '15 at 13:48

score 2 · Accepted Answer · answered Mar 28 '15 at 13:50

As @RémyJ wrote, you can use jQuery select event, to get the selection. Try this:

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/

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

A similar question has been asked here. You could use the JQuery select method (here) or the JS selection method (here). And then replace selection with HTML wrapped block.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 28 '15 at 13:43

Rémy J

108
5

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

2 Answers2