Textarea随着文本的字数自适应高度,后来发现用 contenteditable 代替textarea 效果更佳
做移动端项目遇到很多问题,最近比如textarea 随着文本的字数自动撑开高度, 网上也查阅了一些资料发现比较有用的方法
就是获取 textarea的行数和换行符来动态改变textarea的高度 就是计算文本的行数,再重新设置文本的rows实现的
附上代码:

然后查阅了资料发现 用 HTML 5 全局 contenteditable 属性 的更佳牛逼,都不用这么麻烦的动态改变,只
要把 div 的innerHtml获取到复制就行 , 感觉textarea 要被淘汰了 ,哈哈哈哈
Textarea随着文本的字数自适应高度,后来发现用 contenteditable 代替textarea 效果更佳的更多相关文章
- iOS即时通讯输入框随字数自适应高度
代码地址如下:http://www.demodashi.com/demo/13210.html 前言 本人最近在研究socket与聊天界面的UI,在写聊天界面UI的时候是模仿微信的界面其中的文字输入框 ...
- textarea多行文本框自适应高度
<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script> <scr ...
- Jquery实现textarea根据文本内容自适应高度
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5 textarea 文本框根据输入内容自适应高度
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- textarea文本域轻松实现高度自适应
转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...
- “自适应”高度的 textarea 文本输入框
写在前面 那啥,在我的那个很安静的一个 CSS 群(群号:82991297)突然看到有人在问一个问题. 使用 css 如何实现:textarea 如何实现高度自适应? 当时看到这个问题的时候,我脑中只 ...
- [Swift通天遁地]二、表格表单-(12)设置表单文字对齐方式以及自适应高度的文本区域TextArea
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
随机推荐
- html readonly 和 disable 区别
readonly 和 disable的区别Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(te ...
- pg和mysql对比
作者:方圆链接:https://www.zhihu.com/question/20010554/answer/15863274来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- cocos2dx基础篇(9) 滑块控件CCControlSlider
[3.x] (1)去掉 “CC” (2)对象类 CCObject 改为 Ref (3)CCControlEvent 改为强枚举 Control::EventType (4)CCControlEvent ...
- unity shader 热扭曲 (屏幕后处理)
效果: c# using System; using System.Collections; using System.Collections.Generic; using UnityEngine ...
- Scratch少儿编程系列:(九)音乐高级技巧
一.程序说明 本程序用来演奏音乐,相对于“Scratch少儿编程系列:(八)演奏简单音乐”而言,本节介绍的方法适用于复杂点的音乐. 二.程序流程图 为了更直观的描述上述过程,采用流程图的方式将猜数字的 ...
- Django-DRF组件学习-其他学习
1.认证Authentication 可以在配置文件中配置全局默认的认证方案 REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_ ...
- pymysql操作数据库
pymysql.connect()参数说明:(连接数据库时需要添加的参数)host(str): MySQL服务器地址port(int): MySQL服务器端口号user(str): 用户名passwd ...
- 多变量分析绘图(hue参数)以及盒图和小提琴图
1,函数stipplot() stipplot()函数用来画散点图,其x轴是离散型的变量 直接上代码 import seaborn as sns import numpy as np import p ...
- 用seborn的函数distplot(), jointplot(), pairplt()对数据的单变量分析绘图
1.用seaborn的distplot()函数绘制直方图.参数kde = True时会把分布曲线也画出来. 如下代码所示是绘制标准正态分布的分布图 import seaborn as sns impo ...
- 7.安装pycharm----导入Nmap模块----netcat反向shell----metasploitable靶机环境
安装pycharm www.jetbrains.com/pycharm/ tar -zxvf p补全 ls cd p补全 ls cd bin ls ./pycharm.sh 新建项目 pythonRo ...