Menu
I have a form with a text box and a button:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
</head>
<body>
<p><textarea rows="4" cols="30">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea></p>
<p><input type="button" value="Click me"></p>
</body>
</html>
The user makes a text selection, then clicks on the button. As textarea loses focus, selection is no longer visible.
Is there a way to make the selection remain visible? It doesn't need to be usable (i.e., there's no need that e.g. typing removes the selection or Ctrl+C copies it) but I'd expect some kind of visual feedback that the textarea contains a selection.
Demo: Fiddle
412
<textarea onblur="this.focus()">this is a test</textarea>
<p><input type="button" value="Click me"></p>
This works as expected with IE/Chrome. But not with FF.
So here is a general solution:
<textarea onblur="doBlur(this)">this is a test</textarea>
<p><input type="button" value="Click me"></p>
<script>
function doBlur(obj) {
setTimeout(function() { obj.focus(); }, 10);
}
</script>
After digging through jsFiddle, I found that CodeMirror has everything you need to create a highly customized textarea. It was built for writing codes but with a small trick, it can be applied to textareas in general.
See DEMO
First have a textarea ready:
<textarea id="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea>
Then place the following script after it to create a CodeMirror textarea, and provide additional settings to convert it to a normal textarea.
mode: I use "none" here to remove syntax highlighting.lineWrapping: use true to wrap for long lines.var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("a"), {
mode: "none",
lineWrapping: true
});
Finally, use CSS to control the size and make it look like a standard textarea:
.CodeMirror {
font-family: monospace;
font-size: 12px;
width: 300px;
height: 100px;
border: solid 1px #000;
}
I know this isn't technically what you wanted, but I'm going to cheat anyways.
Javascript:
var textarea = document.getElementById('textarea');
var div = document.getElementById('holder');
var original_value = textarea.value;
textarea.onblur = function () {
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
textarea.style.display = "none";
div.innerHTML = textarea.value.splice(end, 0, "</span>").splice(start, 0, "<span>");
div.style.display = "block";
}
div.onclick = function () {
div.style.display = "none";
textarea.style.display = "block";
textarea.value = original_value;
}
String.prototype.splice = function( idx, rem, s ) {
return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};
HTML:
<p><textarea id="textarea" rows="4" cols="30">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea></p>
<div id="holder"></div>
<p><input id="click" type="button" value="Click me"></p>
CSS:
textarea, #holder{
height: 120px;
width: 300px;
border: 1px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 3px;
font-size: 10pt;
font-family: Arial;
}
#holder{
display: none;
}
#holder span{
background-color: #b4d5ff;
}
demo: http://jsfiddle.net/Mb89X/4/
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
