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