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

div模拟textarea在ios下不兼容的问题解决的更多相关文章

  1. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  2. div模拟textarea自适应高度

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

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

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

  4. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

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

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  7. javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...

  8. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

  9. div模拟textarea

    有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择   <div contenteditable="true ...

随机推荐

  1. 【转载】JAVA常见面试题及解答(精华)

     JAVA常见面试题及解答(精华)       1)transient和volatile是java关键字吗?(瞬联) 如果用transient声明一个实例变量,当对象存储时,它的值不需要维持.例如: ...

  2. 我的Vscode配置

    "editor.fontSize": 17,//字体大小 "editor.wordWrap": "on",//软换行 "files ...

  3. lintcode-14-二分查找

    二分查找 给定一个排序的整数数组(升序)和一个要查找的整数target,用O(logn)的时间查找到target第一次出现的下标(从0开始),如果target不存在于数组中,返回-1. 样例 在数组 ...

  4. DataSet和List 泛型之间互相转换 (转载)

    //DataSet与泛型集合间的互相转换 //利用反射机制将DataTable的字段与自定义类型的公开属性互相赋值. //注意:从DataSet到IList<T>的转换,自定义类型的公开属 ...

  5. do_group_exit函数

    一个进程在sleep状态如何获取进程的调用栈 TASK_WAKEUPKILL状态 一个进程sleep了,我如何获取他的用户态栈,如何获取用户堆栈 如何在内核态打印用户态+内核态的栈? 确定上一个调用栈 ...

  6. foreach循环2

    <select id="test" parameterType="java.util.List" resultType="user"& ...

  7. shit antd & Merry Christmas bug

    shit antd & Merry Christmas bug https://github.com/ant-design/ant-design/issues/13098 antd 玩大了? ...

  8. 第72天:jQuery实现下拉菜单

    jQuery实现下拉菜单 一.居中 1.块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度 2.行内块元素居中:给元素父级设置text-algin:center; < ...

  9. 【Python】python动态类型

    在python中,省去了变量声明的过程,在引用变量时,往往一个简单的赋值语句就同时完成了,声明变量类型,变量定义和关联的过程,那么python的变量到底是怎样完成定义的呢? 动态类型 python使用 ...

  10. 【bzoj3545/bzoj3551】[ONTAK2010]Peaks/加强版 Kruskal+树上倍增+Dfs序+主席树

    bzoj3545 题目描述 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路相连,共M条路径,每条路径有一个困难值,这个值越大表示越难走,现在有Q组询问,每组询 ...