当焦点改变时保持文本选择 [英] Keep text selection when focus changes
问题描述
我想保留用户在文本框中的选择，即使用户关注 $ b
在步骤3中，放弃用户的文本选择。这怎么能防止呢？例如，请参阅Google docs link lightbox lightbox。
感谢：）
$ b 更新
好的，Google文档使用iframe作为空白页面部分，这是他们如何处理多个选择。像这样的东西（对不起的HTML）：
// test.html
< html>< body> ;
< h1 onclick ='lightbox（）;'>这是主要部分< / h1>
< iframe src ='frame.html'>< / iframe>
< div id ='lightbox'style ='display：none;位置：固定;顶部：0;左：0;身高：100％宽度：100％;不透明度：0.8; background-color：black;'>
< input type ='text'name ='url'/>
< / div>
< script type ='text / javascript'>
函数lightbox（）{
document.getElementById（'lightbox'）。style.display ='block';
}
< / script>
< / body>< / html>
// frame.html
< p>这是我的iframe< / p>
iframe中的文本选择是独立的灯箱。因此，如果选择了这是我的iframe的文本，那么将切换灯箱并将光标放置在输入中，iframe的文本选择将保留，而不会使用任何javascript。
<现在我正在尝试Nickolay的建议。
From >如何保留文本选择打开一个jQuery对话框：你必须保留选择模糊和恢复它焦点：$ b
$ pre $ code $（dialog）。focus（function（）{
//保存选择
$}}。blur（function（）{
//设置文本选择
}）;
设置选项（来自 jQuery设置文本区域的光标位置）：
<$ c $如果（this.setSelectionRange）{
this.focus（）; $（$））$ f $。 b $ b 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
I have a normal textbox, and a lightbox with a text input.
I want to keep the user's selection in the textbox, even when the user focuses on the lightbox's text input.
- Select text in normal textbox
- Toggle lightbox
- Focus on lightbox input
At step 3., the user's text selection is discarded. How can this be prevented? See Google docs link insertion lightbox for example.
Thanks :)
Update
Ok, so Google docs uses an iframe for the blank page section, which is how they are handling the multiple selections. Something like this (excuse the disgusting 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>
Text selection in the iframe is independent of focus on the input in the lightbox. So if some of the text 'This is my iframe' is selected, then the lightbox is toggled and the cursor placed in the input, the iframe's text selection persists without any javascript.
I'm trying Nickolay's suggestion now.
From How to preserve text selection when opening a jQuery dialog: you have to preserve selection on blur and restore it on focus:
$("dialog").focus(function() {
// save the selection
}).blur(function() {
// set the text selection
});
Setting selection (from 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);
Getting selection: http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/test.html
这篇关于当焦点改变时保持文本选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
