Rumah hujung hadapan web tutorial js JS解决移动web开发手机输入框弹出的相关实例代码

JS解决移动web开发手机输入框弹出的相关实例代码

Apr 19, 2017 am 11:09 AM

在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化。怎么解决这个问题呢?下面脚本之家小编给大家分享JS解决移动web开发手机输入框弹出的问题

在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化

1、页面提高背景会出现不够用的现象,

解决方法,在body中设置背景图,即便是页面抬升了,背景也依旧存在,

2、底部用fix布局

 这个问题会使得页面提升而底部的fix也跟着提升,遮盖住相应的页面,这个有两种解决方法

一、是页面页相应的提高,页面变化多少我们让上面的页面滚动多少,


$('input').bind('click',function(e){
  var $this = $(this);
  e.preventDefault();
  setTimeout(function(){
    $(window).scrollTop($this.offset().top - 10);
  },200)
})
Salin selepas log masuk

$this.offset().top 是input 元素的高度,将window滚动到要输入的input的位置

二、把fix元素隐藏掉当页面输入完成再展示出来


var original = document.documentElement.clientHeight;
window.addEventListener("resize", function() {
var resizeHeight = document.documentElement.clientHeight;
if(resizeHeight != original) {
$('.bottom-button').css('display', 'none');
} else {
$('.bottom-button').css('display', 'block');
}
});
Salin selepas log masuk

利用resize属性,当手机输入框弹出时,页面屏幕会变形,resize就会执行,我们先获取原来的高度,当发生变化时我们获取现在的页面高度,当页面高度不一样的时候就隐藏元素。

Atas ialah kandungan terperinci JS解决移动web开发手机输入框弹出的相关实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Dec 17, 2023 pm 06:55 PM

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Dec 18, 2023 pm 03:39 PM

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok

Cara membuat carta candlestick saham menggunakan PHP dan JS Cara membuat carta candlestick saham menggunakan PHP dan JS Dec 17, 2023 am 08:08 AM

Cara membuat carta candlestick saham menggunakan PHP dan JS

Hubungan antara js dan vue Hubungan antara js dan vue Mar 11, 2024 pm 05:21 PM

Hubungan antara js dan vue

Apakah kelebihan dan kekurangan C++ berbanding bahasa pembangunan web yang lain? Apakah kelebihan dan kekurangan C++ berbanding bahasa pembangunan web yang lain? Jun 03, 2024 pm 12:11 PM

Apakah kelebihan dan kekurangan C++ berbanding bahasa pembangunan web yang lain?

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi geokod peta Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi geokod peta Nov 21, 2023 pm 06:30 PM

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi geokod peta

Era AI JS sudah tiba! Era AI JS sudah tiba! Apr 08, 2024 am 09:10 AM

Era AI JS sudah tiba!

See all articles