个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我制作了一个 contenteditable div 和一个按钮“趋势”，当用户单击按钮时，它会更改光标以提供帮助，并且每当用户右键单击或双击 contenteditable div 内的任何文本时，该文本将显示在另一个文本中div，这一切只有在点击趋势按钮后才会发生。当用户选择文本时，他必须再次单击趋势按钮才能选择另一个文本。基本上一次一个文本。但在我的多次双击代码中，单击趋势按钮后会选择多个文本。单击趋势按钮后，我必须一次选择一个文本，要选择另一个文本，用户必须再次单击趋势按钮，然后双击文本。
这是我的代码，以便更好地理解。
$('#popup_button').on("click", function(e){
e.preventDefault();
$("#textarea").css("cursor", "help");
$("#textarea").mousedown(function(e){
if (e.which === 3){
e.preventDefault();
document.getElementById("textarea").addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
var text = getSelectionText(e);
//console.log(text);
$('.show_popupmenu').css('display', 'block');
$('.show_popupmenu').css('left',e.pageX); // <<< use pageX and pageY
$('.show_popupmenu').css('top',e.pageY);
$('.show_popupmenu').css('display','inline');
$(".show_popupmenu").css("position", "absolute");
}
if (e.which === 1) {
$('.show_popupmenu').css('display', 'none');
}
});
$("#textarea").dblclick(function(e){
e.preventDefault();
$('#textarea').css('cursor', 'auto');
$('.show_popupmenu').css('display', 'none');
var text = getSelectionText();
//console.log(text);
if(text !== ''){
//console.log(text);
$(".selected_trend").append('<div class="trends" id="trend'+text+'" data-text="'+text+'" style="width:auto; height:auto; display:inline-block;">'+text+'<p class="removetrend" data-id="'+text+'" style="display:inline-block; cursor:pointer;">×</p></div>');
}
})
});
$(document).on('click','.removetrend', function(e){
e.preventDefault();
$(this).parent().remove();
});
function getSelectionText(){
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}#textarea{
height:100px;
border:1px solid;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div contenteditable="true" data-maxlength="50" id="textarea" class="editable" data-placeholder="Type here..."></div>
<div class="selected_trend"></div>
<div class="popupbtn">
<button id="popup_button">Select Trend</button>
</div>
</body>
</html>最佳答案
jquery 将是这样的:
<script type="text/javascript">
$('#popup_button').on("click", function(e){
$("#popup_button").attr('data-clicked',true);
e.preventDefault();
$("#textarea").css("cursor", "help");
$("#textarea").mousedown(function(e){
if (e.which === 3){
e.preventDefault();
document.getElementById("textarea").addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
var text = getSelectionText(e);
//console.log(text);
$('.show_popupmenu').css('display', 'block');
$('.show_popupmenu').css('left',e.pageX); // <<< use pageX and pageY
$('.show_popupmenu').css('top',e.pageY);
$('.show_popupmenu').css('display','inline');
$(".show_popupmenu").css("position", "absolute");
}
if (e.which === 1) {
$('.show_popupmenu').css('display', 'none');
}
});
$("#textarea").dblclick(function(e){
e.preventDefault();
$('#textarea').css('cursor', 'auto');
$('.show_popupmenu').css('display', 'none');
var text = getSelectionText();
//console.log(text);
if(text !== ''){
if($("#popup_button").attr('data-clicked')=='true'){
//console.log(text);
$(".selected_trend").append('<div class="trends" id="trend'+text+'" data-text="'+text+'" style="width:auto; height:auto; display:inline-block;">'+text+'<p class="removetrend" data-id="'+text+'" style="display:inline-block; cursor:pointer;">×</p></div>');
$("#popup_button").attr('data-clicked',false);
}
}
});
});
$(document).on('click','.removetrend', function(e){
e.preventDefault();
$(this).parent().remove();
});
function getSelectionText(){
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
</script>
关于jquery - 单击一次后阻止单击，直到用户再次单击另一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59573710/
25
4
0
我需要在 JavaScript 中的笛卡尔坐标和球坐标之间进行转换。我在论坛上浏览了一下，没有找到我要找的东西。 现在我有这个: this.rho = sqrt((x*x) + (y*y) + (z*
有没有matrix3d可以像这样把矩形变成梯形的？我知道常规的 2d 矩阵变换只能以平行四边形结束，因为您只能有效地倾斜和旋转。 div { width: 300px; height:
关于这个例子(d3.j radial tree node links different sizes)，我想知道是否可以在 d3.js 中混合径向树和直线树。 对于我的 jsFiddle 示例:htt
我尽量把标题写得最好，但我不确定如何准确描述这里发生的事情，所以请随时更正。 我想使用 › 直 Angular 引号 (›) 而不是 > 直 Angular 引号 (>)，虽然 › 字符比 > 短，但
我正在尝试使用 CSS 创建一个具有圆边的矩形棱柱，如下图所示。 到目前为止，我已经指定了顶部和底部的边界半径。问题是我不知道如何让另一边的左右边缘向内 curl 。因此，拐 Angular 处不应有
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 去年关闭。 社区去年审查了是否重
首先，我刚刚开始学习 HTML 和 CSS。 我想如何使用这段代码: https://codepen.io/martinjkelly/pen/vEOBvL .container { width:
我是一名优秀的程序员,十分优秀！