Question

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

下图是我需要的一个例子：

var selectedText = "s is an in"

我使用Powertip进行工具提示，使用Rangy来操纵<input>和<textarea>中的选择，问题是我无法管理弹出工具提示并在JS变量之后获取所选文本我用光标选择文本。

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

提前致谢。

UPDATE：

感谢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

使用模态创建弹出窗口，创建文本字段选择事件＆amp; a触发打开锚点的函数。这就是你所需要的一切。

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

<!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>

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

UPDATE：

3 个答案: