在单击时突出显示文本(javascript jquery html)
当您在所有浏览器中双击某个单词时,它们会自动突出显示该单词下的单词。但是,是否有可能找到一种方法让单一点击发生同样的事情?在单击时突出显示文本(javascript jquery html)
我想这可能涉及的事情是: - TextRange stuff; - 反应到的onclick的所有段落(或全身或DIV),......但后来我还没有发现任何地方,说你怎么能告诉浏览器:
“嘿请不要突出的是很酷的事情!文本就在鼠标下面......现在就是...即使我只点击一下,也没有双击。“
只是为了澄清:我不要求突出一个div或段落内的全部文本(这将是相当简单的,很多的解释,给出了上计算器)。我也不想做任何事情,比如为每个单词插入十亿个跨度。我希望能够在浏览器中双击文本时获得完全相同的功能,但只需单击一下即可。
是的,我打算对选定的文本做些什么。
$('#content').click(function() {
$(this).dblclick();
});
浏览器可能会限制此行为。例如,如果您试图通过转移或执行另一个事件来点击()不同的元素。以下的答案也可以帮助有:
一种凌乱的办法,但使用这个你可以听单击每个单词,然后模仿行为。我不认为dblclick()会模拟原生双击,但使用这种方法你可能能够实现你想要的。
脚本:
var words = $("p:first").text().split(" ");
var text = words.join("</div> <div>");
$("p:first").html("<div>" + text + "</div>");
$("div").click(function() {
$(this).css("background-color","yellow");
});
HTML
<p> word1 word2 word3 </p>
小提琴
我要继续前进,并说,这是不可能的。
Javascript与DOM树交互,您可以与元素进行交互,但不能与文本本身交互。我认为这是远程可能的唯一方法(除了淹没在span代码中的html代码之外)是动态执行它:读取文本节点并分割跨度中的单词。
但是我们不要忘记:所有的浏览器都可以在双击时完美地完成这个任务,所以他们绝对有能力。浏览器本身我确定是实际处理突出显示文本的内容,而不是操作系统(在这种情况下,事情会变得更加模糊)。所以他们显然有一个命令来做到这一点,根据鼠标指针的位置。不过,我了解情绪。我看了看,看起来... – 2012-03-12 01:06:29
浏览器是一个应用程序,你可以用本地应用程序做很多事情,你不能用javascript做。我已经尝试了其他应用程序中的doble点击,并且以相同的方式工作,所以我认为更多的是操作系统而不是浏览器本身。 – kumiau 2012-03-12 03:18:00
与@Sindre相同的概念,当鼠标悬停在< p>上时,将文本拆分为单词并用于渲染它们。点击这些< span>,点亮它们。
在我的jsfiddle下面,单击一个单词,所有相同的单词都会突出显示。 你可以改变比较设置选择,例如。与索引比较,而不是单词本身,以单独突出单个词。
此外,我没有使用鼠标悬停,而是点击。所以你应该点击< p>选择(激活,使颜色变成红色),然后选择一个单词。 jsfiddle here
// main code
<div
@click='select'
:class='cls'>
<p v-if='!split'> {{data}} </p>
<p v-else>
<span
v-for='word in spdata'
:class='chosen(word)'
@click='choose'>
{{word}}
</span>
</p>
</div>
// --------------------
methods: {
select (e) {
this.split = true
},
choose (e) {
let el = e.srcElement
this.chosenWord = el.innerText
console.log(this.chosenWord)
},
chosen (word) {
if (word.trim() === this.chosenWord.trim()) {
return ['chosen']
} else {
return []
}
}
},
computed: {
spdata() {
return this.data.split(' ')
}
}
谢谢阿拉姆,非常有趣(和简单)。不幸的是,没有为我工作。我在调试时看到,每次点击都会调用该函数,所以这不是问题。所以它不起作用(在Chrome和IE中试用)。这可能与Mantion在下面说的有关:“我不认为dblclick()会模拟原生双击。”敏锐的观察,可能为什么它没有工作。可能有一种方法来模拟原生双击? – 2012-03-12 01:07:46
在这个答案中,它延迟了双击的事件。我认为当两个事件处理程序同时被调用时,浏览器怀疑犯规行为。 – 2012-03-13 23:49:08