js点击按钮,弹窗内的文本框展示选中的数据内容
时间: 2024-03-21 14:38:45 浏览: 11
好的,可以参考下面的代码实现:
HTML部分:
```
<button onclick="showSelectedText()">点击展示选中文本</button>
<div id="myPopup" class="popup">
<input type="text" id="selectedText" placeholder="这里将会展示选中的文本">
</div>
```
JS部分:
```
function showSelectedText() {
var selectedText = "";
if (window.getSelection) {
selectedText = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
selectedText = document.selection.createRange().text;
}
document.getElementById("selectedText").value = selectedText;
// 弹出弹窗
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
```
CSS部分:
```
.popup {
position: fixed;
bottom: 50px;
right: 50px;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
z-index: 1;
}
.popup input[type="text"] {
width: 100%;
padding: 10px;
border: none;
background-color: #fff;
margin-top: 10px;
border-radius: 3px;
}
/* 显示弹窗 */
.popup.show {
visibility: visible;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
/* 动画效果 */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
```
以上代码实现了点击按钮后,获取选中的文本并展示在弹窗内的文本框中。注意,这里使用了弹窗的样式,需要在CSS部分添加弹窗的样式和动画效果。