将样式应用于双击的文本

Applying a style to text that I double click?

本文关键字：文本 双击 应用于 样式      更新时间：2023-09-26

编辑为改写：

我有一个输入框

<input type="text" id="some_id" />

我在浏览器中输入一些文本：

Here is my text!

现在假设我双击单词"我的"，我可以：吗

捕捉这个价值？是的，答案如下。

我可以在文本输入中将其设置为粗体或高亮显示吗？

在我双击后的文本输入中，它最终会看起来像：

这是我的文本！

如果您只想选择单词（通过双击默认行为）

$('input').dblclick(function() {
    $(this).addClass(yourClass);
    alert(getSelected());
});

使用从中找到的getSelected函数http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html

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;
}

将类仅应用于选定的文本。。我不知道它是否可能是

我认为这是不可能的。

这是从输入中获取文本的示例

HTML:

<input type="text" id="inputbox"/>

JS:

$("input#inputbox").dblclick( function(e) {
   alert($(this).val());
 });

另一种方法是在文档文本中而不是在输入框中进行

JS:

$(document).ready(function() {
    $("body").click(function(){
         var s = window.getSelection();
        s.modify('extend','backward','word');        
        var b = s.toString();
        s.modify('extend','forward','word');
        var a = s.toString();
        s.modify('move','forward','character');
         alert(b+a);
    });
});

你可以在这里试试上面的例子http://jsfiddle.net/niklasvh/rD2uE/

您必须使用dblclick：http://jsfiddle.net/d9DfM/

HTML:

<input type="text" id="input">

Le javascript:

$('#input').dblclick(function () {
    $(this).css('background-color', "red");
    alert($(this).val());
});

$(document).ready(function(){
    $("#sometextval").dblclick(function(){
        myval = $("#sometextval").val(); 
        alert(myval);
    });
})

Fiddle：http://jsfiddle.net/N9mcL/

相关文章：