当textarea失去焦点时显示选择
Álv*_*lez 20 html javascript css jquery
我有一个带有文本框和按钮的表单:
<!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>
用户进行文本选择,然后单击按钮.由于textarea失去焦点,选择不再可见.
有没有办法让选择保持可见？它不需要是可用的(即,不需要例如打字删除选择或Ctrl+C复制它)但我期望某种视觉反馈,textarea包含选择.
演示:小提琴
在深入研究 jsFiddle 后，我发现CodeMirror拥有创建高度定制的文本区域所需的一切。它是为编写代码而构建的，但通过一个小技巧，它通常可以应用于文本区域。
参见演示
首先准备好一个文本区域：
<textarea id="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea>
然后将以下脚本放在其后面以创建 CodeMirror 文本区域，并提供其他设置以将其转换为普通文本区域。
mode：我用"none"这里来删除语法突出显示。lineWrapping：用于true长行换行。
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("a"), {
mode: "none",
lineWrapping: true
});
最后，使用 CSS 控制大小，使其看起来像标准的文本区域：
.CodeMirror {
font-family: monospace;
font-size: 12px;
width: 300px;
height: 100px;
border: solid 1px #000;
}
尝试这个：
var element = document.getElementById('text')
if(element.setSelectionRange)
{
element.focus();
element.setSelectionRange(2, 10);
}
else if(element.createTextRange)
{
var selRange = element.createTextRange();
selRange.collapse(true);
selRange.moveStart('character', 2);
selRange.moveEnd('character', 10);
selRange.select();
field.focus();
} else if( typeof element.selectionStart != 'undefined' ) {
element.selectionStart = 2;
element.selectionEnd = 10;
element.focus();
}
http://jsfiddle.net/inser/YJzvb/2/
- 我认为你误解了这个问题。如果我们[添加一个按钮](http://jsfiddle.net/hTRZL/)，您的代码的行为就像我的一样。您只是以编程方式创建一个选择 - 我不想创建一个选择，我已经有了一个选择。我只是想让它*可见*。 (2认同)
| 归档时间： |
|
| 查看次数： |
6482 次 |
| 最近记录： |