我有一个普通的文本框和一个带文本输入的灯箱.
我希望将用户的选择保留在文本框中,即使用户专注于灯箱的文本输入也是如此.
>在普通文本框中选择文本
>切换灯箱
>专注于灯箱输入
在步骤3,丢弃用户的文本选择.如何防止这种情况？例如,请参阅Google文档链接插入灯箱.
谢谢 ：)
更新
好的,所以Google文档使用iframe作为空白页面部分,这就是他们处理多个选择的方式.像这样的东西(原谅令人作呕的HTML)：
// test.html
<html><body>
<h1 onclick='lightbox();'>This is the main section</h1>
<iframe src='frame.html'></iframe>
<div id='lightbox' style='display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.8; background-color: black;'>
<input type='text' name='url' />
</div>
<script type='text/javascript'>
function lightbox() {
document.getElementById('lightbox').style.display = 'block';
}
</script>
</body></html>
// frame.html
<p>This is my iframe</p>
iframe中的文本选择与灯箱中输入的焦点无关.因此,如果选择了某些文本“This is my iframe”,则会切换灯箱并将光标放在输入中,iframe的文本选择会在没有任何javascript的情况下持续存在.
我现在正在尝试Nickolay的建议.
解决方法:
从How to preserve text selection when opening a jQuery dialog开始：你必须保持模糊选择并在焦点上恢复它：
$("dialog").focus(function() {
// save the selection
}).blur(function() {
// set the text selection
});
设定选择(从jQuery Set Cursor Position in Text Area开始)：
$.fn.selectRange = function(start, end) {
return this.each(function() {
if(this.setSelectionRange) {
this.focus();
this.setSelectionRange(start, end);
} else if(this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
$('#elem').selectRange(3,5);
获得选择：http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/test.html