【问题标题】:Find out if a selected text is inside a input field or textarea查明所选文本是否在输入字段或文本区域内
【发布时间】:2015-12-21 23:56:07
【问题描述】:

我正在创建一个 chrome 扩展。

每当您选择文本时,我都会在网页中与所选内容相邻添加两个按钮。

如果选择在文本区域或输入框内,我不希望发生任何操作。

这是我目前使用的代码

$(document).on("mouseup", function(e) {
    var class1=e.target.nodeName;
    var class2=e.target.firstChild;
    console.log(class1);
    console.log(class2);
    if(class1=="INPUT" || class1=="TEXTAREA"){
    }
    else{
    var selectedtext=window.getSelection().toString();
    var chars=selectedtext.length;
if(chars>2){
    var posx=e.clientX;
    var posy=e.clientY;
    var scrollDepth=$(window).scrollTop();
    posy=posy+scrollDepth;
    var location=findSelectionCoords(posx,posy);
    create_Button(location);
}
}
});

创建按钮函数用于创建按钮。

如果用户在文本区域/输入框中选择了一些文本,此功能有效,控制台会显示输入/文本区域。 但有时文本区域或输入框也被选中,然后此功能失败。在 class1 中,我在这种情况下得到 DiV。

有人能推荐一个在所有情况下都有效的函数,并检测文本选择是否在输入或文本区域内

提前致谢

【问题讨论】:

    标签: javascript jquery selection textselection


    【解决方案1】:

    这是示例代码,其中仅当mouseup 事件来自不是textareainput 类型的文本元素时才会显示警报消息。

    编辑代码:

    $(function() {
        var isInputOrTextarea = false;
    	$(document).on("mousedown", function(e) {
            // On mousedown flag whether it was clicked in input or textarea
            if($(e.target).is("textarea,input[type=text]")) {
                isInputOrTextarea = true;
            }
        });    
    	$(document).on("mouseup", function(e) {
            if($(e.target).is("textarea,input[type=text]") || isInputOrTextarea) {
                isInputOrTextarea = false;
                return;
            }
            isInputOrTextarea = false;
            alert("Not in text area or input");
        });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <input type="text" value="Lorem ipsum"/>
    <textarea>
        Lorem ipsum
    </textarea>
    <p>
        Lorem ipsum
    </p>
       

    【讨论】:

    • 感谢您的帮助,但此代码面临与我的代码相同的问题。尝试选择文本并点击输入字段的边框。您将收到消息“不在文本区域或输入中”
    • 你在浏览器中尝试吗?你真正想达到什么目标?因为它正在工作。消息“不在文本区域或输入中”仅显示,并且仅当您释放鼠标按钮时您不在输入或文本区域中时,是否触摸输入的边框无关紧要。那么,你想要相反还是什么?
    • 这就是问题所在,在某些情况下,用户进行了选择并且他的鼠标离开了输入框,这自然会在某个时候发生。然后出现警报消息。我不希望这种情况发生。有没有可以帮助解决这个问题的功能
    • 您在哪个浏览器中试用示例?在我提供的样本中,我无法重现您描述的行为。我在输入(或文本区域)中进行选择,同时将光标移动到输入(或文本区域)之外,然后我释放鼠标并且消息不显示。所以我不明白你是如何或在哪里尝试的。
    • 我正在 chrome 上尝试示例。问题正是您在第一条评论中所描述的。当鼠标移出文本区域然后释放时,会出现警告消息
    【解决方案2】:

    就在 javascript 中,这是一个如何从输入内部清除事件的示例。这是一个单线。

    document.onkeydown = function (ev) {
      switch (ev.key) {
        case 'ArrowRight':
          if (!ev.shiftKey && ['INPUT','TEXTAREA'].indexOf(ev.srcElement.nodeName) == -1)
            advance();
          break;
        default:
          console.log(ev.key);
      }
    };
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-07-23
      • 2020-05-18
      • 2021-08-18
      相关资源
      最近更新 更多