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 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下不兼容的问题解决的更多相关文章
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决
javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- div模拟textarea
有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择 <div contenteditable="true ...
随机推荐
- Python函数的内省-Introspection
Python函数可以进行内省-Introspection,查看函数内部的细节,方式就是使用函数的__code__属性. def func(a, b = 2): return a + b >> ...
- Advanced Fruits (最大公共子序列的路径打印)
The company "21st Century Fruits" has specialized in creating new sorts of fruits by trans ...
- Python—列表(一个“打了激素”的数组)
我们在C语言中会使用数组来将一大堆数据类型一样的数据挨个摆在一起,但是数组有一个基本的要求,就是数据类型必须是一致的,我们知道Python的变量由于没有数据类型,也就是说Python没有数组这一概念, ...
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- 《Effective C#》快速笔记(二)- .NET 资源托管
简介 续 <Effective C#>读书笔记(一)- C# 语言习惯. .NET 中,GC 会帮助我们管理内存,我们并不需要去担心内存泄漏,资源分配和指针初始化等问题.不过,它也并非万能 ...
- Oracle导数据到SQL server的方法总结
通过oracle10g 访问sql server 2008 导数据步骤 最近在项目中遇到要将Oracle数据库的数据导入到SQL server数据库中,解决办法如下: 一.准备工作 配置Oracle ...
- centos7 nginx端口转发出现502的其中一种原因
在排查了一系列可能的原因后仍无法解决,经资料查阅可能是SELinux造成,SELinux很强大但若配置不当也会造成很多组件无法正常使用,这里直接将其关闭: //打开配置文件 vi /etc/selin ...
- 【MVC】ASP.NET MVC5 使用MiniProfiler 监控MVC性能
MiniProfiler ,一个简单而有效的迷你剖析器,可以有效的实时监控页面.通过直接引用.Ajax.Iframe形式访问的其它页面进行监控,监控内容包括数据库内容,并可以显示数据库访问的SQL. ...
- Python 文件对象和方法
Python文件对象和方法 1.打开和关闭文件 Python提供了必要的函数和方法进行默认情况下的文件基本操作,我们可以用file对象做大部分文件操作. open()方法 我们必须先用Python内置 ...
- CF757G Can Bash Save the Day?
CF757G Can Bash Save the Day? #include<bits/stdc++.h> #define RG register #define IL inline #d ...