Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 29|回复: 0

div模拟textarea在ios下不兼容的问题解决

[复制链接]
  • TA的每日心情
    奋斗
    昨天 14:57
  • 签到天数: 135 天

    [LV.7]常住居民III

    1413

    主题

    1470

    帖子

    6万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    63624
    发表于 2021-9-8 11:18:42 | 显示全部楼层 |阅读模式

    今天发现一个好东西,赶紧记下来,我在用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 width
              ta.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 jumping
              document.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 lower
          if (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,不设置的话,还是会出现滚动条滴

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2021-9-26 21:39 , Processed in 0.063552 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表