移动端的坑 之 在可编辑的div中实现placeholder

1.当我们个  div 设置了 contenteditable = "true" 这个块状元素就可以编辑了, 如果要实现 placeholder 直接写上去是没有效果的

<div contenteditable="true"  placeholder="please write infomation"></div>//没有效果

2.可以添加样式来实现

*[contenteditable="true"]:empty:before{
        content:attr(placeholder);
        color: #A9A9A9;
    }

这段代码匹配 属性 contenteditable="true" 的元素类容为empty时添加:before伪元素

  attr(placeholder)获取属性placeholder的值赋值给content这样就可以模拟的实现文本框中 placeholder 属性,

3.在ipone机中首次显示时是ok的,当你输入内容后再清空发现 并没有显示再显示placeholder的内容,这是因为这个可编辑的块这时不是空,还有换行符,

如果我们有使用jquery,zepto等我们可以拿到这个元素的text();跟这个元素再赋值“”;

如果我们用js,用innerText去获取块元素的值,你会发现不管你值是否为空都是true,就没有办法判断我什么时候是空(只有在ipone中才这样),

然后我就去看了下jquery中的text()是怎么实现的,它用了一个textContent属性,用这个属性就可以判断到

时间: 2024-08-05 02:21:45

移动端的坑 之 在可编辑的div中实现placeholder的相关文章

移动前端系列——移动端页面坑与排坑技巧

移动前端系列——移动端页面坑与排坑技巧 In 网页重构 on 2014-12-08 20:21:19 by lyushine 对于前端开发者来说移动端存在更多的挑战,移动端页面开发过程中会碰到各种各样千奇百怪的问题(我们俗称BUG或坑),那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧. 移动端页面在不同设备.不同操作系统 .不同运行环境下都可能造成各种各样的没有碰到过的的坑,相比曾经的IE6坑多了.下面先介绍一下4类具体常见的坑: 1.外观 A.页面高度渲染错误 在各移动端浏览器中经

easyUI在可编辑的datagrid中计算两列的值

在这个教程中你将学习如何包含一个运算的列在可编辑的datagrid中,一个运算列通常包含一些运算值从一个或多个其他列. 查看Demo 首先,创建一个可编辑的datagrid,这就是我们创建的一些可编辑列,'listprice','amount' 和'unitcost' 列定义为numberbox 编辑类型,运算列是 'unitcost'字段, 将是 listprice 乘以 amount列的结果. <table id="tt" style="width:600px;he

js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

编辑并列DIV

html编辑控件,编写3个div并行,先看一下效果,如下图: 我需要将整个白色部分作为一个整体,编辑控件使用,其实使用到的就是div中的float:left属性,并且定义好宽度.css 部分代码如下: .divtitle-item1{width:58%; float:left; } .divtitle-item2{width:21%;float:left;} .divtitle-item3{width:21%;float:left;} 但是多个当多个白色控件使用的时候,又出现上浮的情况,开始的时

移动端填坑之路

搞PC项目,最头疼的莫过于做IE6/7/8的兼容性(很蛋疼的事).而在如今移动端H5的兴起中,面对形形色色的机型,各种各样的品牌手机,导致我吗们FE们要做各种手机适配问题.样式兼容问题等等(巨烦,找问题还不好找).以下是在移动端项目之路上所遇到的各种问题: UC浏览器--css3的坑 最近在做一个移动端项目,涉及到评论模块,有评论必有点赞功能,当然也就存在点赞动画效果,第一反应就是利用css3动画效果. 方案一:transition+伪元素 .方案二:transition.方案呢三:animat

移动端的坑~~~~~~~

随着前端的热度不断升温,行业对前端的要求越来越高:精准无误的实现UI设计,已成为前端职业更加精细化的一种表现:随着移动互联网的发展.WebApp似乎一种不可逾越的鸿沟:越来越多的企业开始趋势于轻量级的设计,H5正在慢慢的发酵可以完成更多的原生体验:交互质量的提升,对前端更是一种质的飞越:前端作为门槛低,精深难的事实一直被论证,想成为真正大神,要经历痛苦的月球表面-满满的都是坑:只有爬过来的人,才有资格说:要改变.要革新.做架构~ 说了那么多,就是为了小伙伴们在前端的路上更加精细的学习:本文持续更

移动端踩坑合集

前段时间在小密圈和大家分享我的感受,H5代替客户端进行移动端开发,是大趋势.未来较长一段时间,是混合应用的天下.然而H5写移动页面,那绝对是一步一个坑的节奏啊,做好各设备的兼容将是各前端er的重要使命.今天给大家送上一个合集,是我最近开发中遇到的一些坑,作个记录,也给大家一些经验. 1. babel-polyfill老实加上.现在很多项目都用ES6在写了,ES6在移动端的兼容也天生较好.有些同学嫌弃polyfill文件太大(压缩后也将近100KB)就不引了,反正用到的方法也不多. 然而最近发现项

移动前端系列–移动端页面坑与排坑技巧

## video标签脱离文档流 问题描述:标签的父元素(祖辈元素)设置transform样式后,标签会脱离文档流 测试环境:部分android机型 解决办法:不使用transform属性.translate用top.margin等属性替代 ## ::after在手机中使用animation无效 问题描述:::after在手机不支持animation 解决办法:不用伪元素改为普通元素 ## 页面高度渲染错误 问题描述:页面100%高度包含地址栏高度,当地址栏存在时,会部分内容被隐藏 环境与频率:经

新版chrome移动端踩坑

我再更新到最新的chrome版本后,使用vue开发移动端用chrome调试,当我点击input框控制台报错 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. 这是chrome的坑之一,需要自己手动取消默认事件 这里推荐最简单的方法,使用css全局设置取消 *{ touch-action: pan-y; } 当然  也可以使用js