user-modify属性,让html标签可以编辑
其实这只是一个很小的需求,但是写着写着发现干货越来越多,所以特意给大家分享一下。
项目需要做一个类似QQ聊天输入的效果
有的同学说,这不是很简单吗?一开始我也这么感觉 :)
观察需求
1.整体固定在底部
2.左侧为编辑区域
3.右侧按钮应该为固定宽度
4.随着输入文字变多,输入域高度向上自增,且有一个阈值
好的,开始写(啪啪啪啪),这点布局难不了我,基本布局应该是这样的
<div class="input_area">
<div class="input_area-input">
<textarea></textarea>
</div>
<div class="input_area-btn"></div>
</div>
但是问题来了,textarea
的高度如何自增呢?鄙人不才,想不出来。:)
于是我百度了一下,几乎都需要很长的js代码来解决,而且效果还很不理想。
textarea
不行的话,只能用B计划了: contenteditable
contenteditable
属性可以轻松的使标签变成可编辑状态,只需要在html标签上加上contenteditable="true"
,就可以轻松的模拟文本域了:
<div contenteditable="true" class="input"></div>
此时文本域的高度是由该 div
标签来控制的,所以只要不写死 div
的高度,该文本域的高度就会随着文字换行自增自减。
.input{
width: 300px;
min-height: 30px;
max-height: 90px;
overflow-y: auto
}
好了,解决了高度问题我们开始布局css,这里我使用了less
<div class="input_area">
<div class="input_area-input-wrap">
<div class="input_area-input" contenteditable="true"></div>
</div>
<div class="input_area-btn-wrap">
<div class="input_area-btn">发送</div>
</div>
</div>
*{box-sizing: border-box}
html{background-color: #f1f1f1}
.input_area{
@input_area-height: 40px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
padding: 3px 0 3px 5px;
@button-width: 80px;
&-input-wrap{
width: 100%;
padding-right: @button-width;
}
&-input{
@line-height: @input_area-height - 6 - 8;
width: 100%;
min-height: @line-height;
max-height: @line-height * 4;
padding: 0px; color: green;">#fff;
border-radius: 4px;
outline: none;
padding: 4px 8px;
line-height: @line-height;
overflow-y: auto;
}
&-btn-wrap{
width: @button-width;
height: @input_area-height;
position: absolute;
right: 0;
bottom: 0;
padding: 3px 5px;
}
&-btn{
width: 100%;
height: 100%;
padding: 0px; color: green;">#EA5A49;
color: #fff;
text-align: center;
line-height: @input_area-height - 6;
border-radius: 4px;
}
}
页面变成了这样
恩,效果很不错,很满意。
但是还有一个问题,contenteditable="true"
复制粘贴的时候不能过滤html标签
通过百度,发现了 user-modify
这个css属性, user-modify
支持以下四个值:
- user-modify: read-only;
- user-modify: read-write;
- user-modify: write-only;
- user-modify: read-write-plaintext-only
read-write
和 read-write-plaintext-only
会让元素表现得像个文本域一样,可以focus以及输入内容。
区别是前者可以输入富文本,后者只可以输入纯文本。
所以就可以不用设置 contenteditable="true"
了,而改用 user-modify: read-write-plaintext-only
,问题就迎刃而解了。
所以这篇文章就教了你一个css属性 user-modify
:),关于更多这个属性的介绍可以看这篇博文