• div设置contenteditable="true" 光标消失:原因


    原因1:document.onselectstart= function(){return false;};

    原因2:父层设置了user-select:none 导致 子层设置了 contenteditable 会出现异常,但是在ie和chrome并没有体现出来

    如果把编辑框换成input标签不会由于禁止文本选中而出现光标消失的情况了,可以自己尝试

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		*{margin:0;padding:0;}
    		body{position:relative;}
    		.call-bulk{
    			position: absolute;
    		    top: 50px;
    		    left: 0;
    		    500px;
    		    height: 100px;
    		    background-image: url(http://og0bztn1p.bkt.clouddn.com//niannianyun/uploadFiles/nn_imgs/author_img/20170823101025wAC.png);
    		    background-position: center bottom;
    		    background-repeat: no-repeat;
    		    background-size: 100% auto;
    		}
    		.call{
    			position: absolute;
    		    left: 0;
    		    bottom: 14px;
    		     100%;
    		    height: 25px;
    		    font-size: 18px;
    		    line-height: 25px;
    		}
    		div[contenteditable="true"]:empty:before{
    		    content: attr(placeholder);
    		    color: #BAB3AF;
    		    /*padding: 10px 0;*/
    		    -webkit-tap-highlight-color:transparent;
    		    -webkit-user-modify:read-write;
    		    outline:none;
    		    border:none;
    		}
    	</style>
    </head>
    <body>
    	<div class="call-bulk" id="call-bulk">
    		<div class="call" contenteditable="true" placeholder="称呼"></div>
    		<!-- <input type="text" class="call" placeholder="称呼"> -->
    	</div>
    	<button id="btn">换背景</button>
    	<script>
    		var imgUrl = [
    		'http://og0bztn1p.bkt.clouddn.com//niannianyun/uploadFiles/nn_imgs/author_img/20170825151639dY8.png',
    		'http://og0bztn1p.bkt.clouddn.com//niannianyun/uploadFiles/nn_imgs/author_img/20170823101025wAC.png',
    		'http://og0bztn1p.bkt.clouddn.com//niannianyun/uploadFiles/nn_imgs/author_img/20170825160657xsv.png',
    		'http://og0bztn1p.bkt.clouddn.com//niannianyun/uploadFiles/nn_imgs/author_img/20170822111147c5U.png',
    		'http://og0bztn1p.bkt.clouddn.com//niannianyun/uploadFiles/nn_imgs/author_img/20170825151639vlO.png'
    		];
    		var callBulk = document.getElementById('call-bulk');
    		var Btn = document.getElementById('btn');
    		var len = imgUrl.length;
    		Btn.onclick = function(){
    			var i = Math.floor(len*Math.random());//(0-1)*5 = 0-5的随机数不包括5,向下取整
    			// x=Math.random()  0<= x < 1 
    			console.log(1);  
    			console.log(i); 
    			var bgurli = 'url('+ imgUrl[i] + ')';
    			callBulk.style.cssText = 'background-image:'+ bgurli;
    			document.onselectstart= function(){return false;};
    		}
    	</script>
    </body>
    </html>
    

      

  • 相关阅读:
    HTML中的target(_self,_blank)用法总结
    实用且不花哨的js代码大全
    C#操作Excel文件暨C#实现在Excel中将连续多列相同数据项合并
    ASP.NET操作EXCEL
    sql分页存储过程(汇总)
    Jquery plugin(多文件上传)
    使用 Anthem.NET 的常见回调(Callback)处理方式小结
    NET开发人员必知的八个网站
    用jQuery合并表格中相同文本的相邻单元格(一)
    Sigma Grid(纯javascript开发的Ajax数据表格,超级强大)
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/7553634.html
Copyright © 2020-2023  润新知