移動web開發中input等輸入框問題
移動端web開發時，input等輸入框在安卓和iso中都有問題，分別有：
1.iso不能點擊其餘區域使得輸入框失去焦點
2.iso輸入框失去焦點後，鍵盤產生的空白部分不消失
3.安卓端輸入框獲得焦點後，輸入框不會自動跳轉到可視範圍
如下是我寫的一個案例，對這些問題進行解決。使用vue編寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no">
</head>
<body>
<div id="app">
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<form action="" id="register">
<div class="sgqformline">
<div class="con infoitem">
<div id="acName" class="inputBox">
<input type="text" name="name" placeholder="請輸入您的真實姓名" @focus="isohide($event)" @blur="isoshow($event)" maxlength="40">
</div>
</div>
<div class="wrong_tips"></div>
</div>
<div class="sgqformline">
<div class="con infoitem">
<div id="acMobile" class="inputBox">
<input type="tel" name="mobile" placeholder="請輸入手機號" @focus="isohide($event)" data-reg="tel" maxlength="11" @blur="isoshow($event)">
</div>
</div>
<div class="wrong_tips"></div>
</div>
</form>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var iso = false;
var nowinput = null;
var myAPP;
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
};
if(browser.versions.ios){
iso = true;
}
function docTouchend (event){
if (!(event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA')) {
// 若是點擊的不是input或者textarea，讓iso中輸入框失去焦點
if (iso) {
// 延時時間和移動距離能夠調整
setTimeout(function(){
nowinput.blur(); //解決iso不能點擊其餘區域使得輸入框失去焦點
window.scrollBy(0,10); // 解決iso失去焦點鍵盤佔據空白不消失 document.removeEventListener('touchend', docTouchend,false); }, 300); } } else { if (!iso) {// 解決安卓機再次點擊輸入框（輸入框已得到焦點），輸入框不在可視區域 if (nowinput === event.target) { setTimeout(function () { event.target.scrollIntoView(); },400) } } } }; myAPP = new Vue({ data: function () { return{ } }, methods: { isohide: function (e) { nowinput = e.target; document.addEventListener("touchend", docTouchend, false); if (!iso) {// 解決安卓機點擊輸入框後，輸入框不在可視區域的問題 setTimeout(function () { e.target.scrollIntoView(); }, 400); } }, isoshow: function (e) { document.removeEventListener('touchend', docTouchend,false); if (iso) { // 解決iso失去焦點鍵盤佔據空白不消失 window.scrollBy(0,1); } } }, mounted: function () { }, filters: { } })</script></body></html>
相關文章
- 1. input 輸入框 光標錯位問題 、移動端輸入框/input框光標錯位問題、微信H5輸入框/input框光標錯位問題
- 2. HTML5移動開發中的input輸入框類型
- 3. 移動端input框問題
- 4. 移動端input「輸入框」常見問題及解決方法
- 5. ios移動端input輸入框常見問題解決辦法
- 6. Dcloud Mui H5+移動Web開發 IOS端input沒法輸入
- 7. 移動端input輸入框常見bug
- 8. 移動端input開發問題
- 9. 解決移動端輸入法遮蓋input輸入框的問題…
- 10. 移動端輸入框問題1
- 更多相關文章...
- • ionic 表單和輸入框 - ionic 教程
- • ionic 浮動框 - ionic 教程
- • PHP開發工具
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
