實現效果:
點擊後 :
html部分
注意 input是用來存點擊複製的文本內容的 不要用display:none 不然複製事件無效
<input id="copy_content" type="text" value="" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/>
<td style="white-space: nowrap!important;">
<div class="Omission fudong" data-bind="text:company">
</div>
</td>
css部分
.Omission{
text-overflow:ellipsis;
white-space: nowrap!important;
overflow: hidden;
max-width: 150px;
cursor:pointer;
/* width: 150px; */
position: relative;
/* position: relative; */
}
.fd{
position: relative;
}
.aaa{
overflow: auto;
max-width: 500px;
position: absolute!important;
border: 1px solid #0088CC;
border-radius: 5px!important;
background: #fff;
height: 30px;
top: 3px;
line-height: 28px;
}
.img-close{
margin:0 5px 0 0;
}
js部分
$(document).on('click','.fudong',function(){//添加浮動事件
var text= $(this).text();
if(text.length>11){
if(document.getElementById("img-close")){
console.log("已有")
}else{
$('.fudong').removeClass('aaa');
$(this).parent().addClass('fd');
$(this).addClass('aaa');
$(this).append("<span style='color:red;margin:0 5px' class='copy_content'>複製</span><img class='img-close' id='img-close' src='../../Assets/image/close.png' />")
}
}
})
$(document).on('click','.img-close',function(e){//關閉浮動事件
// console.log('222');
$(this).parent().removeClass('aaa');
$(this).siblings().remove();
$(this).remove();
//阻止事件冒泡
if (e) {
e.stopPropagation();
e.preventDefault();
} else {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
})
$(document).on('click','.copy_content',function(e){//點擊複製事件
var text= $(this).parent().text();
text=text.substr(0,text.length-2);
var input = document.getElementById("copy_content");
input.value = text; // 修改文本框的內容
input.select(); // 選中文本
document.execCommand("copy"); // 執行瀏覽器複製命令
$('.img-close')[0].click();
if (e) {
e.stopPropagation();
e.preventDefault();
} else {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
})