原因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;

		    width: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;

		    width: 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>

　　

div设置contenteditable="true" 光标消失：原因的更多相关文章

  1. div设置contentEditable="true"作为文本编辑器，定位光标解决办法

    function set_focus(el) {    el = el[0]; // jquery 对象转dom对象    el.focus();    if ($.browser.msie) {   ...

  2. div设置contenteditable 的小技巧

    div设置contenteditable="true",即可编辑,除从网页粘贴过来内容的格式 <div contenteditable="true" id ...

  3. 可编辑DIV （contenteditable="true"） 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

  4. 解决div设置浮动，高度消失

    给包围 浮动的层 加清除浮动样式,样式要兼容的用下面的代码.clearfix {*zoom:1; clear:both;}.clearfix:after{content:".";d ...

  5. 通过js操作，将div设置为contenteditable的内容设为全选状态

    因为div设置为contenteitable可编辑的文本内容用 select()选择全部内容不生效,所以只能用下列方法: 先 creatTextRange或者 createRange <div ...

  6. IOS中div contenteditable=true无法输入

    在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是无法输入.加一个样式-webkit-user-sele ...

  7. <div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑

    需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<texta ...

  8. 使用contenteditable=true的div模拟textarea（vue2.0中使用，带placeholder且高度自动撑开）

    子组件: <template> <div class="item-address"> <span v-show="!hasAddress&q ...

  9. contenteditable="true"让div可编辑

    今天才知道有这个属性,真是out了. 不过以前一直没做编辑器有关的,毕竟开源的很多. 现在觉得开源的也不是这么好用,自己写写简单的吧 用了 <div class="content-bo ...

随机推荐

  1. 分布式理论(六)—— Raft 算法

    前言 我们之前讲述了 Paxos 一致性算法,虽然楼主尝试用最简单的算法来阐述,但仍然还是有点绕.楼主最初怀疑自己太笨,后来才直到,该算法的晦涩难懂不是只有我一个人这么认为,而是国际公认! 所以 Pa ...

  2. 8.C#知识点:委托和事件

    知识点目录==========>传送门 首先推荐两篇大牛写的委托和事件的博客,写的超级好!看了就包你看会,想学习的朋友直接看这两篇就足以,我自己写的是算是自己学习的纪录. 传送门======== ...

  3. zookeeper 知识点汇总

    目录 Zookeeper 是什么 Zookeeper 树状模型 Zookeeper 集群结构 如何使用 ZooKeeper 运行 Zookeeper 步骤1 修改 ZooKeeper 配置文件 步骤 ...

  4. Romantic（hdu2699+欧几里德）

    Romantic Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  5. Magic Number (zoj3622)

    Magic Number (zoj3622) Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Oth ...

  6. LINQ to Objects系列(1)相关技术准备

    LINQ to Objects是LINQ的一部分,是查询对象集合的一种语法.首先看一下LINQ的体系结构,这样对LINQ有一个大致的了解.如图. 第一篇文章主要是回顾一下学习LINQ to Objec ...

  7. 关于UltraWinGrid选中行只读设置

    刚开始设置了 一些属性不起作用,后来检查下属性发现一旦对DataSource赋值 则属性会被重置 如果是通过绑定DataSet的方式 则需要再后面设置 ].Override.CellClickActi ...

  8. Three.js开发指南---粒子和粒子系统（第七章）

    使用粒子可以很容易的创建很多细小的物体,例如雨滴雪花等 本章主要内容: 1 使用ParticleBasicMaterial(基础粒子材质)来创建和设计粒子 2 使用ParticleSystem来创建一 ...

  9. 使用PHP把图片上传到七牛

    先从官网下载SDK,然后新建一个文件,里面包括上传,下载,删除 <?php header("Content-Type:text/html; charset=utf8"); r ...

  10. 设计模式(10)--Facade(外观模式)--结构型

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.模式定义: 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使 ...