【jq】超出文本顯示省略 點擊後浮動

實現效果:

點擊後 :

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;
		}
	})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章