原因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. ASP.NET Core (二)：入门

    上一篇:ASP.NET Core(一):简介 下一篇:(待续) 英文原版:Getting Started 1. 安装 .NET Core 2. 创建 .NET Core 项目 在命令提示符窗口输入命令 ...

  2. AWK工具的用法

    基本格式 awk '{commands}' filename 或者 stdin | awk '{commands}' 以下,均简写为awk '{commands}'的形式 commands的用法 co ...

  3. .NET Core2.0 使用EF做数据操作

    原文链接:https://www.cnblogs.com/chrisluo/p/7500462.html

  4. CruiseControl 安装配置

    https://sourceforge.net/projects/ccnet/files/CruiseControl.NET%20Releases/ 一个完整的配置文件(VS2010的解决方案)其他版 ...

  5. C# Thread.Abort方法真的让线程停止了吗？

    大家都知道在C#里面,我们可以使用 Thread.Start方法来启动一个线程,当我们想停止执行的线程时可以使用Thread.Abort方法来强制停止正在执行的线程,但是请注意,你确定调用了Threa ...

  6. docker 第一次学习（一）--安装以及相关命令

    转自:https://www.jianshu.com/p/c69a2a3b4c7a https://docs.docker.com/ http://www.dockerinfo.net/documen ...

  7. python学习之老男孩python全栈第九期_day008知识点总结

    ''''如何打开一个文件模特主妇护士老师.txt1. 文件路径:f:\模特主妇护士老师.txt2. 操作方式:只读:r ,rb ,只写: w, wb ,追加: a , ab,读写:r+ , r+b,写 ...

  8. 退役前的最后的做题记录upd:2019.04.04

    考试考到自闭,每天被吊打. 还有几天可能就要AFO了呢... Luogu3602:Koishi Loves Segments 从左向右,每次删除右端点最大的即可. [HEOI2014]南园满地堆轻絮 ...

  9. html5 图片上传 预览

    <html><body><fieldset> <legend>测试</legend> <div class="form-gr ...

  10. 解决跨域问题之anywhere

    anywhere搭建服务,ionic PC端和手机端可以通过网址来查看网页效果.解决跨域问题 大家都知道编写完HTML代码后,可以直接在pc端的浏览器查看,但现在手机端越来越广泛了,想跟在pc端查看网 ...