在工具栏中选择文本后的HTML工具提示 <input> 或在 <textarea>

Question

好的，基本上我需要的是，当我在<input>或<textarea>选择一些文本时，工具提示会出现两个按钮，然后在Javascript变量中获取所选文本。

下图是我需要的示例：

var selectedText = "s is an in"

我使用Powertip工具提示和瘦长的操纵选择<input>和<textarea> ，问题是，我不能设法弹出提示并获得一个JS变量中选定的文本后，我选择与文本光标。

关于如何实现这一目标的任何建议？

提前致谢。

更新：

感谢Todd的回答，我在分享我要实现的目标： JSFiddle

Answer 1

这似乎有效

$('input, textarea').powerTip({ manual: true }); // have to prevent default plugin


$('input, textarea').on({
    'select': function() {
        var selectedText = window.getSelection().toString();
        $(this).powertip('show');
     },
     'blur': function() {
        $.powerTip.hide();
     }
});

Answer 2

您可以在选择文本时添加鼠标向上事件，并可以获取所选文本，此后，当您显示所选文本时，还可以显示带有该提示的工具提示。

这是用于显示文本选择的JSFiddle Link ，您可以对其进行更新，也可以显示我在其中打印所选文本的工具提示。

如何显示工具提示框：

步骤1）您需要在输入字段的顶部和左侧。

步骤2）使用HTML和CSS创建一个框。

步骤3）将其位置设置为绝对位置，并将其容器设置为相对位置。

步骤4）将其设置为您在步骤1中收到的顶部和左侧。

Answer 3

使用模态创建弹出窗口，创建文本字段选择事件，然后使用函数触发打开锚点。 那就是您所需要的。

这是我创建的一个工作示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Select Modal</title>

<style>
    .modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 300px;
    height:130px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #151414;

}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
</style>
<script type="text/javascript">
function myFunction() {
    window.open("#openModal","_self");
}
</script>
</head>

<body>
<input type="text" onSelect="myFunction()">
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <br>
        <br>
        <br>
        <br>
        <br>
        <input type="button" value="Button 1">
        <input type="button" value="Button 2">
    </div>
</div>
</body>
</html>

在工具栏中选择文本后的HTML工具提示 <input> 或在 <textarea>

问题描述

更新：

3 个解决方案

解决方案1
2 已采纳 2014-12-11 04:01:24

解决方案2
0 2014-12-11 03:41:29

解决方案3
0 2014-12-11 03:48:15

在工具栏中选择文本后的HTML工具提示 <input> 或在 <textarea>

问题描述

更新：

3 个解决方案

解决方案1 2 已采纳 2014-12-11 04:01:24

解决方案2 0 2014-12-11 03:41:29

解决方案3 0 2014-12-11 03:48:15

解决方案1
2 已采纳 2014-12-11 04:01:24

解决方案2
0 2014-12-11 03:41:29

解决方案3
0 2014-12-11 03:48:15