第一步: 在标签的输入框中添加获取焦点事件 代码写法: @focus="getFocus" (vue 代码) 可直接拷贝拿去放在自己页面元素中, 如下:
- <div class="o-field o-grid__cell carinfo-grid__cell">
- <input
- @blur="onPlaceholderMobleBlur"
- @focus="getFocus"
- :value="holderMobile"
- class="c-field"
- type="text"
- placeholder="请输入投保人手机号"
- maxlength="11">
- </div>
第二步: 在 methods 方法中声明 获取焦点事件 如下写法, 下面代码直接拷贝即可
- methods: {
- getFocus() {
- $("input,textarea").on("blur", function() {
- Windows.scroll(0, 0);
- });
- },
这里引入 jQuery(jQuery 还是很好用的)
实现原理:
原理就是弹起键盘的时候, Windows.scrollY 会从 0 变到键盘的高度 (例如: 200), 当输入框焦点失去后让 scrollY 回到 0 就好了
或者 这么写只是不需要引入 jQuery 了
- Windows.addEventListener('focusout', function () {
- document.body.scrollTop = document.body.scrollHeight;
- })
- <div class="o-field o-grid__cell carinfo-grid__cell">
- <input
- @blur="onPlaceholderMobleBlur"
- :value="holderMobile"
- class="c-field"
- type="text"
- placeholder="请输入投保人手机号"
- maxlength="11">
- </div>
来源: https://www.cnblogs.com/yangwenbo/p/11028005.html