20200323记录2个前端问题

3 月，跳不动了？>>>

1、IOS软键盘收起后界面按钮失效问题 2、input上下上下居中

解答1：

• Js修復方法
• @param {String} el 需要修复元素id(#)、class(.)或html标签字符串
• @param {Bolean} isSelect 需要修复的元素对象是否为“select”标签

function jsIosWechatPopFormFix(el, isSelect) { if (!el) return false; var resEl; var elSelector = el.charAt(0); var elString = el.slice(1); var listenEvent = isSelect ? 'change' : 'blur'; switch (elSelector) { case '.': resEl = document.getElementsByClassName(elString); break; case '#': resEl = document.getElementById(elString); break; default: resEl = document.getElementsByName(el); } resEl.addEventListener(listenEvent, function () { window.scroll(0, 0); }) } jsIosWechatPopFormFix('input'); jsIosWechatPopFormFix('textarea'); jsIosWechatPopFormFix('select', true);

• Jq修復方法
• @param {String} el 需要修复元素id(#)、class(.)或html标签字符串
• @param {Boolean} isSelect 需要修复的元素对象是否为“select”标签

function jqIosWechatPopFormFix(el, isSelect) { if (!el) return false; var resEl = $(el); var listenEvent = isSelect ? 'change' : 'blur'; resEl.on(listenEvent, function () { window.scroll(0, 0); }); } jqIosWechatPopFormFix('input'); jqIosWechatPopFormFix('textarea'); jqIosWechatPopFormFix('select', true);

Vue修復方法

<textarea placeholder="请输入您取消的原因" @blur="window.scroll(0,0)"></textarea> <input type="text" placeholder="请输入您取消的原因" @blur="window.scroll(0,0)" /> <select @change="window.scroll(0,0)"><option>1</option><option>2</option></select>

Html or Vue通用修復方法

<textarea placeholder="请输入您取消的原因" onblur="window.scroll(0,0)"></textarea> <input type="text" placeholder="请输入您取消的原因" onblur="window.scroll(0,0)" /> <select onchange="window.scroll(0,0)"><option>1</option><option>2</option></select>

解答2：要设置高度和line-height

来源：oschina

链接：https://my.oschina.net/sycbbb/blog/3209026