三种实现文本输入框的操作

发表于 2017-08-16 | 分类于 html+css | 阅读次数

undefined

最近捣鼓的都是前端的活啦。说大不大，但是统统放到一篇文章又害怕臃肿得找不出来。干脆开一个分类好了？

话不多说，直接掏出三个实现文本标签方法。各有优缺点，可以根据情况使用

`<input type="text">`标签

不自动换行，不断向右平铺
可以方便使用placeholder
方便设置长度和对文本进行限制
不能输入图片
方便设置是否能输入readonly

在ios上需要注意设置display:block来避免input框肆意扩张

综上，就是有十分多的属性提供给你用来验证检验，可以避免一大坨的js代码。表单必用

`<textarea>`标签

多行文本换行出现滚动条
使用placeholder
方便设置长度和对文本进行限制
不能输入图片
方便设置是否能输入readonly

大概就是多行版rows='3' cols='20'的input，重置属性的时候要注意resize:none去除缩放框

`contenteditable`属性

div模拟textarea文本域轻松实现高度自适应直接给爸爸的一个连接。总的还说，就是<div contenteditable= true></div>

高度自适应换行
可以插入图片
不方便设置长度和限制
不能使用placeholder需要js模拟
是否允许输入需要切换contenteditable=false
允许插入富文本（更多情况会造成麻烦）

注意和说明：

现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框，而实际上textarea是没有虚框显示的，此迹象会暴露出div是个冒牌货，所以，需要添加下面的样式：
1
outline:0;
Firefox浏览器下可编辑模式的div如果内部元素是空空的，那么其在获取焦点是时候，光标不可见或是与外部div齐高，这也是会暴露出自己是textarea冒牌货的，所以，默认情况下，我们可以在此div中增加一个孤单的
换行标签。但是，IE8下，如果有个默认的br标签，光标位置可能会在第二行闪来闪去，所以，IE8下可编辑div里面默认是不能有br标签的，这个嘛，您自己想办法清掉吧。
IE浏览器下（IE6~8），输入文字回车的时候，div内部是会自动产生p标签包含每行元素的，而其他浏览器貌似是产生br标签（这里尚未全部测试，如有不准，欢迎指正）。由于默认的p标签是有1em大小的上下margin值的，为了效果统一，我们可以设置诸如下面的样式清除p标签的margin值：
1
.test_box p{ margin: 0; }

控制复制文本的属性
使用JS就可以很方便地实现纯文本，但是看到前缀你就知道他有局限性。怎么办？js配合！

-webkit-user-modify: read-only;
-webkit-user-modify: read-write;
-webkit-user-modify: write-only;
-webkit-user-modify: read-write-plaintext-only;

js 实现纯文本，不影响文字

// 监听粘贴操作
    $('.comment-box-box').on('paste', function(e){
      var data = e.clipboardData.getData('Text');
      $(this).append(data);
      e.preventDefault();
    })

<input type="text">标签

<textarea>标签

contenteditable属性

`<input type="text">`标签

`<textarea>`标签

`contenteditable`属性