如何使用jquery将光标突出显示的文本粘贴到文本输入字段中
如何使用jquery将光标突出显示的文本粘贴到文本输入字段中
提问于 2013-01-29 03:24:51
我的页面有一个<div>，它与从数据库输入的图书脚本相呼应。
用户应该找到一些文本，用光标突出显示它，然后右键单击以显示我从Andrew Whitaker，Stack/4495626获得的自定义上下文菜单。
然后，用户应单击上下文菜单<Idiom>Idiom</Idiom>、<Proverb>Proverb</Proverb>等中的一个选项，以将光标突出显示的文本插入文本字段id="element"中。
User704808:我尝试过jsfiddle，但它不允许上下文菜单在该窗格中工作，所以我更新了下面的整个代码页面。前三个测试正确，因为它们是静态的；我无法使用动态getSelected()。再次感谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).bind("contextmenu", function(event) {
event.preventDefault();
$("div.custom-menu").show();
$(".custom-menu").appendTo("body").css({
top: event.pageY + "px",
left: event.pageX + "px",
visibility: "visible"
});
}).bind("click", function(event) {
if (!$(event.target).is(".custom-menu")) {
$("div.custom-menu").hide();
}
});
</script>
<script type="text/javascript">
var getSelected = function(){
var t = '';
if(window.getSelection) {
t = window.getSelection();
} else if(document.getSelection) {
t = document.getSelection();
} else if(document.selection) {
t = document.selection.createRange().text;
}
return t;
} </script>
<style>
body {font-family:Verdana, Arial, Helvetica, sans-serif; margin-top:14%;}
.custom-menu { z-index:1000; height:85px; position: absolute; background-color:#F0F0F0; border-right: 1px solid black;border-bottom: 1px solid black;border-top: 1px solid white;border-top: 1px solid white; padding: 2px; left: 1103px; top: 12px;visibility:hidden; }
</style>
</head>
<body>
<div class='custom-menu'>
<table width="426" cellpadding="6">
<tr>
<td nowrap="nowrap"><Idioms>Idioms</Idioms></td>
<td nowrap="nowrap"><IdiomsSentence>Idioms Sentence</IdiomsSentence></td>
</tr>
<tr>
<td nowrap="nowrap"><Proverb>Proverbs</Proverb></td>
<td nowrap="nowrap"><ProverbSentence>Proverbs Sentence</ProverbSentence></td>
</tr>
</table></div>
<form name="form13" method="post">
<input type="text" class="cleanup" name="element" id="element" value="" size="70" />
element:<br />
<input class="cleanup" name="elementSentence" type="text" id="elementSentence" value="" size="70" /></td></tr>
elementSentence :</form>
<script type="text/javascript">
$(document).ready(function() {
$("Idioms").click(function(){
$("#element").val("Idioms Test");});
$("IdiomsSentence").click(function(){
$("#elementSentence").val("IdiomsSentence Test");});
$("Proverb").click(function(){
$("#element").val("Proverb Test");});
$("ProverbSentence").click(function(){
$("#elementSentence").val(getSelected());});}); </script>
<div id="dialogue">
<ul>
<li>I have left in place three 'static' test examples that work. Please right-click, select either 'Idioms', 'Proverbs', or 'IdiomsSentence', and you'll see they insert, singly, into the form correctly.<br />
<br />
</li>
<li>The one that isn't working is the one that has the getSelected() wherein someone should drag their cursor over some text like 'There is more than one way to skin a politician.', then right click, select 'Proverbs Sentence', and it should auto-enter the second field.</li>
</ul>
<p>Proverb: There is more than one way to skin a politician.</p>
<p>Idiom: Actions speak louder than words, but I'm pretty loud anyway.</p>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-01-29 03:34:31
编辑:为了简洁和清晰，替换了整个答案。
对问题中的HTML文档进行以下更改：
将head中的两个script块替换为一个包含以下内容的块：
dialogApp = {};
dialogApp.getSelectedHtml = function () {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
$(document).bind("contextmenu", function (event) {
dialogApp.selection = dialogApp.getSelectedHtml();
event.preventDefault();
$("div.custom-menu").show();
$(".custom-menu").appendTo("body").css({
top: event.pageY + "px",
left: event.pageX + "px",
visibility: "visible"
});
}).bind("click", function (event) {
if (!$(event.target).is(".custom-menu")) {
$("div.custom-menu").hide();
}
});在其他脚本块中更改此行：
$("#elementSentence").val(getSelected());});}); </script>至
$("#elementSentence").val(dialogApp.selection);在Chrome和IE9上测试成功。我应用的修复是：
我用来自this answer的一个更有效的函数替换了我最初建议的getSelected函数。
我使用了一种命名空间技术来减轻在此页面上使用的全局变量。
在显示上下文菜单之前，我立即缓存了选定的文本，以防显示菜单会改变浏览器对当前选定内容的评估。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14569584
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号