原因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. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

  2. C# WebAPI设置跨域

    设置前端跨域请求很简单,只需要两个步骤 1.安装package Install-Package Microsoft.AspNet.WebApi.Cors 2.WebApiConfig类中,Regist ...

  3. SQl常用语句总结（持续更新……）

    创建示例数据库 USE master; GO IF DB_ID (N'mytest') IS NOT NULL DROP DATABASE mytest; GO CREATE DATABASE myt ...

  4. ADO.NET 【类库】【与数据库的连接】

    ADO.NET是什么,有什么用 数据库访问技术 ado.net可让开发人员以一致的方式存取资料来源, 资料共用的消费者应用程序可使用ado.net 来连接至这些资料来源,并且撷取.处理及更新其中所含的 ...

  5. Java基本数据类型总结（转载）

    Java基本数据类型总结 基本类型,或者叫做内置类型,是JAVA中不同于类的特殊类型.它们是我们编程中使用最频繁的类型.java是一种强类型语言,第一次申明变量必须说明数据类型,第一次变量赋值称为变量 ...

  6. 15.C++-操作符重载、并实现复数类

    首先回忆下以前学的函数重载 函数重载 函数重载的本质为相互独立的不同函数 通过函数名和函数参数来确定函数调用 无法直接通过函数名得到重载函数的入口地址 函数重载必然发生在同一个作用域中 类中的函数重载 ...

  7. 数据结构：IO读写频繁的青睐，B树和B+树

    目录 B树 定义及特性 查找顺序 保持平衡 B+树 B+树的插入 使用场景 参考 今天学习B树和B+树,B树和B+树都是基于二叉树的衍生,对于二叉树不太了解的读者可以翻看<数据结构:二叉树> ...

  8. 理解Java反射

    一.反射简介 Java让我们在运行时识别对象和类的信息,主要有2种方式:一种是传统的RTTI,它假定我们在编译时已经知道了所有的类型信息:另一种是反射机制,它允许我们在运行时发现和使用类的信息. 1. ...

  9. 01-MySql的前戏

    [转]01-MySql的前戏 MySql的前戏 在学习Mysql之前,我们先来想一下一开始做的登录注册案例,当时我们把用户的信息保存到一个文件中: #用户名 |密码root|123321 alex|1 ...

  10. 如何使用活字格快速搭建Bug管理系统？

    Bug管理系统是指一种用于添加Bug.修复Bug.测试Bug.删除Bug的一套完整的Bug管理系统. 完整的Bug管理过程包含: 1.测试人员利用Bug管理系统提交发现的bug. 2.测试人员把bug ...