contenteditable设置元素可编辑

需求背景

  1. 实现一个输入框,高度可以随着输入文字的增加而自动增高
  2. 有placeholder,输入为空时,显示placeholder

我们知道可以将div的contenteditable设置伪true,将其变为可输入状态。代码如下:

<div contenteditable="true"></div>

这样就满足了我们的第一个需求——高度自适应。但是在手机上测试会发现第一个问题,iOS上面无法输入。经过查找资料,发现只需要为其添加如下样式即可:

div{
    user-select:text;
    -webkit-user-select:text;
}

placeholder

通过contenteditable方法实现的输入框无法添加placeholder。

使用css模拟placeHolder

// html
<div contenteditable="true" data-placeholder="请输入手机号码"></div>

// less
div{
    &:empty:before{
        content: attr(data-placeholder);
        color:#bbb;
    }
    &:not(:empty){
        &:focus:before{
            content:none;
        }
    }
}

但是经过测试在不同手机上面变现不一致,所以放弃了这种方案(猜测可能和:not伪类的兼容有关,还没有做验证)。

使用css+js实现 placeholder

思路:根据输入通过动态添加class,模拟placeHolder的行为。

// html
<div class="input-item empty" contenteditable="true" data-placeholder="请输入手机号码"></div>

// less
.input-item{
    user-select:text;
    -webkit-user-select:text;
    &.empty:before{
        content: attr(data-placeholder);
        color:#bbb;
        position: absolute;
    }

}

// js
$(‘.input-item‘).on(‘keyup‘,function(){
    $(this).removeClass(‘empty‘)
    if($(this).text() == ""){
        $(this).addClass(‘empty‘)
    }
})

到此,我们已经实现了第二个需求——可以设置placeholder

时间: 2024-10-29 16:35:27

contenteditable设置元素可编辑的相关文章

contenteditable 设置可编辑的页面元素

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 function getInnerHTML(){ 8 alert(document.getElementById(&

HTML元素可编辑的属性

一般来说,在html里面表单元素是可以编辑的,非表单元素是不能编辑.但其实在html元素里,只要设置2个属性,所有的元素都能进行编辑. 第一个属性contenteditable,这个是设置元素是否能编辑的,true,false. 第二个属性spellcheck,这个是设置能否拼音编辑的,true,false.

zIndex 属性设置元素的堆叠顺序。

http://www.w3school.com.cn/jsref/prop_style_zindex.asp 该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴.如果为正数,则离用户更近,为负数则表示离用户更远. 语法: Object.style.zIndex=auto|number 可能的值 值 描述 auto 默认.堆叠顺序与父元素相等. number 设置元素的堆叠顺序. 提示和注释 注释:元素可拥有负的 z-index 属性值. 注释:Z-index 仅能在定位元素

设置元素和获取元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置元素和获取元素</title> <script src="js/jquery-1.7.1.js"></script> <script> $(function(){ //alert($('.box')

js中设置元素class的三种方法小结

一.obj.setAtttribute('class','abc') <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>setAttribute('class', 'abc')</title> <style type="text/css"> .abc { background: red; } </styl

jqgrid 设置单元格编辑/不可编辑

首先设置不可编辑,如下代码: $("#jqgrid1").jqGrid('setCell', rowId, 'column', '0', 'not-editable-cell'); 在单元格上设置一个'not-editable-cell'就可以了,如果需要设置为可编辑,那么可以使用下面的代码: 1 function removeCellClass(rowid,grid,clumnName,className) 2 { 3 var iCol = getColumnIndexByName(

css设置元素透明度代码实例

css设置元素透明度代码实例:本章节介绍一下如何设置一个元素的透明度,现在众多的效果都有使用,下面就介绍一下如何实现此效果.w3c提供了一种标准的设置透明度的属性opacity,此属性值大小是介于0-1之间的,0为完全透明,1为完全不透明.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=

jQuery使用之(二)设置元素的样式

css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面章节中有使用过 addClass()为元素添加css样式风格.本节主要介绍jQuery如何设置页面的样式风格.包括添加.删除.动态切换等. 1. 添加.删除css类别. $(function() { //同时添加多个CSS类别 $("img").addClass("css1 css2"); }); 如以上代码对img元素添加了css1和 css2两个样式 removeClass与add

none和hidden设置元素不可见的区别

none和hidden均可设置元素为不可见的状态.其中none属于display的属性值,hidden属于visibility的属性值.使用none时元素不会再占用空间,如果原先占用空间,当dispaly变为none时,其他元素会替补它原先的位置.而使用hidden时元素仍然占用空间,其他元素不会替补它原先的位置. <html> <head> <meta charset="UTF-8"> <script> function none()