div模拟textarea在ios下不兼容的问题解决
今天发现一个好东西,赶紧记下来,我在用textarea的时候,想要自适应高度,这样就不会出现滚动条。网上找了很多,都是用div模拟的,但是好扯淡,div模拟的在ios下不能聚焦并且不能输入。真坑。。。。
然后找了很久,发现了下面这个好东西,嘿嘿嘿,我给你看个宝贝。
这个就不需要去模拟啦,可以直接使用textarea。
(function (root, factory) {'use strict';if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module. define([], factory);} else if (typeof exports === 'object') {// Node. Does not work with strict CommonJS, but// only CommonJS-like environments that support module.exports,// like Node.module.exports = factory();} else {// Browser globals (root is window)root.autosize = factory();}}(this, function () {function main(ta) {if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || ta.hasAttribute('data-autosize-on')) { return; }var maxHeight;var heightOffset;function init() {var style = window.getComputedStyle(ta, null);if (style.resize === 'vertical') {ta.style.resize = 'none';} else if (style.resize === 'both') {ta.style.resize = 'horizontal';}// horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea widthta.style.wordWrap = 'break-word';// Chrome/Safari-specific fix:// When the textarea y-overflow is hidden, Chrome/Safari doesn't reflow the text to account for the space// made available by removing the scrollbar. This workaround will cause the text to reflow.var width = ta.style.width;ta.style.width = '0px';// Force reflow:/* jshint ignore:start */ta.offsetWidth;/* jshint ignore:end */ta.style.width = width;maxHeight = style.maxHeight !== 'none' ? parseFloat(style.maxHeight) : false;if (style.boxSizing === 'content-box') {heightOffset = -(parseFloat(style.paddingTop)+parseFloat(style.paddingBottom));} else {heightOffset = parseFloat(style.borderTopWidth)+parseFloat(style.borderBottomWidth);}adjust();}function adjust() {var startHeight = ta.style.height;var htmlTop = document.documentElement.scrollTop;var bodyTop = document.body.scrollTop;ta.style.height = 'auto';var endHeight = ta.scrollHeight+heightOffset;if (maxHeight !== false && maxHeight < endHeight) {endHeight = maxHeight;if (ta.style.overflowY !== 'scroll') {ta.style.overflowY = 'scroll';}} else if (ta.style.overflowY !== 'hidden') {ta.style.overflowY = 'hidden';}ta.style.height = endHeight+'px';// prevents scroll-position jumpingdocument.documentElement.scrollTop = htmlTop;document.body.scrollTop = bodyTop;if (startHeight !== ta.style.height) {var evt = document.createEvent('Event');evt.initEvent('autosize.resized', true, false);ta.dispatchEvent(evt);}}// IE9 does not fire onpropertychange or oninput for deletions,// so binding to onkeyup to catch most of those events.// There is no way that I know of to detect something like 'cut' in IE9.if ('onpropertychange' in ta && 'oninput' in ta) {ta.addEventListener('keyup', adjust);}window.addEventListener('resize', adjust);ta.addEventListener('input', adjust);ta.addEventListener('autosize.update', adjust);ta.addEventListener('autosize.destroy', function(style){window.removeEventListener('resize', adjust);ta.removeEventListener('input', adjust);ta.removeEventListener('keyup', adjust);ta.removeEventListener('autosize.destroy');Object.keys(style).forEach(function(key){ta.style[key] = style[key];});ta.removeAttribute('data-autosize-on');}.bind(ta, {height: ta.style.height,overflow: ta.style.overflow,overflowY: ta.style.overflowY,wordWrap: ta.style.wordWrap,resize: ta.style.resize}));ta.setAttribute('data-autosize-on', true);ta.style.overflow = 'hidden';ta.style.overflowY = 'hidden';init(); }// Do nothing in IE8 or lowerif (typeof window.getComputedStyle !== 'function') {return function(elements) {return elements;};} else {return function(elements) {if (elements && elements.length) {Array.prototype.forEach.call(elements, main);} else if (elements && elements.nodeName) {main(elements);}return elements;};}}));引入上面的js,然后在需要用的页面执行下面这行代码 autosize(document.querySelectorAll('textarea'));
如果不想出现滚动条,就设置一个max-height,不设置的话,还是会出现滚动条滴
转载于:https://www.cnblogs.com/maomao93/p/7590696.html
div模拟textarea在ios下不兼容的问题解决相关推荐
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...
- div模拟textarea文本框,输入文字高度自适应,且实现字数统计和限制
需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...
- [html] 用一个div模拟textarea的实现
[html] 用一个div模拟textarea的实现 上面的代码实现了div变为可编辑状态,但是textarea标签可以在右下角自由拉伸<div class="edit" c ...
- div模拟textarea文本域轻松实现高度自适应
2019独角兽企业重金招聘Python工程师标准>>> .app-box-content { min-width: 400px; min-height: 120px; ...
- 用DIV模拟TEXTAREA【QQ空间说说对话框】
<script language="javascript"> function show(){if(document.getElementById("mydi ...
- ios下js复制到粘贴板_h5实现一键复制到粘贴板 兼容ios
实现原理 采用document.execCommand('copy') 来实现复制到粘贴板功能 复制必须是选中input框的文字内容,然后执行document.execCommand('copy') ...
- 小程序里头textarea在安卓和iOS下的兼容性问题
小程序里头textarea在安卓和iOS下的兼容性问题 我最近才发现的一个问题,真令人头秃~~~~ 事儿是这样的,我负责编写的页面中有一个textarea输入框,当时没当回事儿,我自己测试的时候用自己 ...
- 微信小程序在IOS下的一些兼容问题记录
1.使用js的new Date("2020-09-10 12:34:56").getTime() 获取的时间戳在ios下不正确 [解决]时间格式为:2020-09-12 12:00 ...
最新文章
- 一文概览 CVPR2021 最新18篇 Oral 论文
- Elasticsearch、Logstash、Kibana搭建统一日志分析平台
- mysql update 加减乘除运算
- mysql 问号作用_什么是MySQL中的问号的意义“WHERE column =?”?
- 移动对meta的定义(转)
- linux按括号截取字符串,Linux作业4
- java extjs4 分页_extjs学习笔记(四)带分页的grid
- maven 配置环境变量
- 阿里推出“阿里云网盘”App;Linux 发布 29 周年​| 极客头条
- POJ 3159 Candies 差分约束dij
- 教你轻松搞定Vue事件总线(EventBus)
- W10系统下 获取 TrustedInstaller 高级权限.
- 【天光学术】项目管理论文:房地产公司项目管理运营提升措施探究(节选)
- 用计算机房的英语造句简单,用英语造句子elder.doc
- 艾克姆 蓝牙nRF52832上册-学习笔记
- 使用IDM下载磁力链或迅雷文件
- 无聊的小明来数1 (5 分)...按位与
- 2013年7月美国Boston之旅
- linux boot菜单列表,/boot/grub/menu.lst详解
- OSChina 周六乱弹 —— 我一直把一哥们当朋友,但
热门文章
- Python sysos模块
- Laravel 安装mysql、表增加模拟数据、生成控制器
- OCR基于深度学习下的CNN字符识别
- linux之dos2unix命令
- linux比较两个目录的差异
- 在线高精度在线计时器(秒表)
- “docker run”VS“docker exec”,这两个命令有区别吗?
- docker入门实践之数据卷管理
- 线程退出时执行函数,处理资源
- SQL--合计函数(Aggregate functions):avg,count,first,last,max,min,sum