Can I prevent the loss of selection in the "onblur" event?
<!DOCTYPE html>
<html xmlns = "; xml:lang = "en" lang = "en">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
<script type = "text/javascript">
window.onload = function () {
var textarea = document.getElementsByTagName ("textarea")[0];
textarea.onblur = function () {
alert ("Should keep selection");
return false;
}
}
</script>
<title>Select me!</title>
</head>
<body>
<textarea>Select me!</textarea>
</body>
</html>
Can I prevent the loss of selection in the "onblur" event?
<!DOCTYPE html>
<html xmlns = "http://www.w3/1999/xhtml" xml:lang = "en" lang = "en">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
<script type = "text/javascript">
window.onload = function () {
var textarea = document.getElementsByTagName ("textarea")[0];
textarea.onblur = function () {
alert ("Should keep selection");
return false;
}
}
</script>
<title>Select me!</title>
</head>
<body>
<textarea>Select me!</textarea>
</body>
</html>
- 1 You want you visitors to select a textarea and then disable them for blurring the textarea so they keep selecting the text in the textarea? sounds strange... – Tim Commented Oct 24, 2010 at 12:36
- 1 I can think of a good reason somebody might want to do this. Let's say they are doing 'on the fly' validation, as-in: preventing the user from moving on to another field before filling something valid into the textarea (or textbox, or other input). I am currently working on a tool that allows users to populate MANY textareas (its an interactive survey exercise); if there's a duplicate, I'd like to alert to them IMMEDIATELY; as doing-so only 'on submit' makes it a more painful experience. People need to remember that there's more to inputs than 'mon forms'. – Ben A. Hilleli Commented Oct 29, 2014 at 18:44
- 1 My use case: pulling up an md-menu with options designed to manipulate the selected text. It's not super convenient that the selection wants to disappear as soon as the menu es up – Mike T Commented Feb 28, 2017 at 20:40
4 Answers
Reset to default 4I don't think that's a good idea. A user with mouse in his/her hand can click anywhere on the page. If you get him/her back into the textarea, it won't be following the principles of web accessibility.
Maybe you mean you want to remember the selection, even if the user focuses on another element, so that if they go back to the textarea, the same text will still be selected. Is this the case?
If so, I think the easiest thing would be to put the textarea in an iframe in the same domain. Each document maintains its own selection context. Of course, you'll need to read the data from the textarea, and probably copy it to a hidden field in your form, as you can't have fields in a form in another document, so you need to make a sort of proxy.
textarea.onblur = function () {
alert("Should keep selection");
textarea.focus();
return false;
}
I've prepare this js class for you:
class SelectionHolder{
constructor(element_id){
this.element = document.getElementById(element_id);
this.selection_start = null;
this.selection_end = null;
}
setListener(object){
this.element.onfocus = ()=>{object.reselect();}
this.element.onblur = ()=>{object.update();}
}
update(){
this.selection_start = this.element.selectionStart;
this.selection_end = this.element.selectionEnd;
}
reselect(){
this.element.setSelectionRange( this.selsection_start, this.selection_end, "forward");
}
}
Then use it for your elements
Let my_holder = SelectionHolder("my-text-area-id");
my_holder.setListener(my_holder)