原因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. vue-router 知识点记录

    vue-router参数传递   1.在vue-router中,有两大对象被挂载到了实例this2.$route(只读.具备信息的对象).$router(具备函数功能).例:获取query用 this ...

  2. C# WebApi 中设置Session可用

    在Global.acax中,添加下面方法 //设置session可用 public override void Init() { PostAuthenticateRequest += MvcAppli ...

  3. MVC应用程序实现上传文件(续)

    前几天,有练习了<MVC应用程序实现上传文件>http://www.cnblogs.com/insus/p/3590907.html 那只是把文档上传至MVC应用程序下的某一目录之中. 其 ...

  4. SpringCloud+Hystrix服务容错

    Netflix Hystrix — 应对复杂分布式系统中的延时和故障容错 +应用场景 分布式系统中经常会出现某个基础服务不可用造成整个系统不可用的情况, 这种现象被称为服务雪崩效应. 为了应对服务雪崩 ...

  5. Flask 中路由系统

    1. @app.route() 装饰器中的参数 methods : 当前 url 地址,允许访问的请求方式 @app.route("/info", methods=["G ...

  6. django rest_framework Serializers 序列化组件

    为什么要用序列化组件 当我们做前后端分离的项目~~我们前后端交互一般都选择JSON数据格式,JSON是一个轻量级的数据交互格式. 那么我们给前端数据的时候都要转成json格式,那就需要对我们从数据库拿 ...

  7. 数据分析-kaggle泰坦尼克号生存率分析

    概述 1912年4月15日,泰坦尼克号在首次航行期间撞上冰山后沉没,2224名乘客和机组人员中有1502人遇难.沉船导致大量伤亡的原因之一是没有足够的救生艇给乘客和船员.虽然幸存下来有一些运气因素,但 ...

  8. JS里面的懒加载(lazyload)

    懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载 涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占 ...

  9. Django. No changes detected when "makemigrations"

    在修改了models.py后,有些用户会喜欢用python manage.py makemigrations生成对应的py代码. 但有时执行python manage.py makemigration ...

  10. Android逆向 破解第一个Android程序

    这节正式开始破解编写的第一个Android工程,打开Android Killer,把第一节自己编写的Android apk拖入Android Killer. PS: 如果Android Killer不 ...