If there is highlighted text inside of a text input, how do I remove the selected text?
I set up a fiddle to show how far I got, but I can't figure out how to remove the given text.
<input type='text' value='stackoverflow' id='text1' />
<br />
<button id="btnSelect">select text</button>
<button id="btnRemove">remove selected text</button>
If there is highlighted text inside of a text input, how do I remove the selected text?
I set up a fiddle to show how far I got, but I can't figure out how to remove the given text.
<input type='text' value='stackoverflow.' id='text1' />
<br />
<button id="btnSelect">select text</button>
<button id="btnRemove">remove selected text</button>
Share
Improve this question
edited Apr 26, 2016 at 8:28
fdomn-m
28.6k8 gold badges37 silver badges67 bronze badges
asked Apr 26, 2016 at 8:18
Waruna ManjulaWaruna Manjula
3,4971 gold badge37 silver badges35 bronze badges
3
- 4 press backspace or delete – guradio Commented Apr 26, 2016 at 8:19
- <input type='text' value='' id='text1' />. Set value blank. – RJParikh Commented Apr 26, 2016 at 8:20
- Refer this: stackoverflow./questions/275761/… – Rayon Commented Apr 26, 2016 at 8:21
2 Answers
Reset to default 9selectionStart
and selectionEnd
are there to get selected text from input
tag ..
check the demo
$("#btnSelect").click(function () {
document.getElementById('txtbox').setSelectionRange(6, 12);
});
$("#btnRemove").click(function () {
var ele = document.getElementById('txtbox');
var text = ele.value;
text = text.slice(0, ele.selectionStart) + text.slice(ele.selectionEnd);
ele.value = text;
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='stackoverflow.' id='txtbox' />
<br />
<button id="btnSelect">select text</button>
<button id="btnRemove">remove selected text</button>
function removeText()
{
document.getElementById('text1').value = "";
}
<input type='text' value='stackoverflow.' id='text1' />
<br />
<button id="btnSelect">select text</button>
<button id="btnRemove" onclick="removeText()">remove selected text</button>