今天发现一个好东西,赶紧记下来,我在用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下不兼容的问题解决相关推荐

  1. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

  2. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...

  3. div模拟textarea文本框,输入文字高度自适应,且实现字数统计和限制

    需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...

  4. [html] 用一个div模拟textarea的实现

    [html] 用一个div模拟textarea的实现 上面的代码实现了div变为可编辑状态,但是textarea标签可以在右下角自由拉伸<div class="edit" c ...

  5. div模拟textarea文本域轻松实现高度自适应

    2019独角兽企业重金招聘Python工程师标准>>> .app-box-content {     min-width: 400px;     min-height: 120px; ...

  6. 用DIV模拟TEXTAREA【QQ空间说说对话框】

    <script language="javascript"> function show(){if(document.getElementById("mydi ...

  7. ios下js复制到粘贴板_h5实现一键复制到粘贴板 兼容ios

    实现原理 采用document.execCommand('copy') 来实现复制到粘贴板功能 复制必须是选中input框的文字内容,然后执行document.execCommand('copy') ...

  8. 小程序里头textarea在安卓和iOS下的兼容性问题

    小程序里头textarea在安卓和iOS下的兼容性问题 我最近才发现的一个问题,真令人头秃~~~~ 事儿是这样的,我负责编写的页面中有一个textarea输入框,当时没当回事儿,我自己测试的时候用自己 ...

  9. 微信小程序在IOS下的一些兼容问题记录

    1.使用js的new Date("2020-09-10 12:34:56").getTime() 获取的时间戳在ios下不正确 [解决]时间格式为:2020-09-12 12:00 ...

最新文章

  1. 一文概览 CVPR2021 最新18篇 Oral 论文
  2. Elasticsearch、Logstash、Kibana搭建统一日志分析平台
  3. mysql update 加减乘除运算
  4. mysql 问号作用_什么是MySQL中的问号的意义“WHERE column =?”?
  5. 移动对meta的定义(转)
  6. linux按括号截取字符串,Linux作业4
  7. java extjs4 分页_extjs学习笔记(四)带分页的grid
  8. maven 配置环境变量
  9. 阿里推出“阿里云网盘”App;Linux 发布 29 周年​| 极客头条
  10. POJ 3159 Candies 差分约束dij
  11. 教你轻松搞定Vue事件总线(EventBus)
  12. W10系统下 获取 TrustedInstaller 高级权限.
  13. 【天光学术】项目管理论文:房地产公司项目管理运营提升措施探究(节选)
  14. 用计算机房的英语造句简单,用英语造句子elder.doc
  15. 艾克姆 蓝牙nRF52832上册-学习笔记
  16. 使用IDM下载磁力链或迅雷文件
  17. 无聊的小明来数1 (5 分)...按位与
  18. 2013年7月美国Boston之旅
  19. linux boot菜单列表,/boot/grub/menu.lst详解
  20. OSChina 周六乱弹 —— 我一直把一哥们当朋友,但

热门文章

  1. Python sysos模块
  2. Laravel 安装mysql、表增加模拟数据、生成控制器
  3. OCR基于深度学习下的CNN字符识别
  4. linux之dos2unix命令
  5. linux比较两个目录的差异
  6. 在线高精度在线计时器(秒表)
  7. “docker run”VS“docker exec”,这两个命令有区别吗?
  8. docker入门实践之数据卷管理
  9. 线程退出时执行函数,处理资源
  10. SQL--合计函数(Aggregate functions):avg,count,first,last,max,min,sum