Skip to content

Instantly share code, notes, and snippets.

@iamaddy

iamaddy/focus show keyboard

Created November 5, 2016 06:00
Show Gist options
  • Save iamaddy/4345eb0491e3254a2833486410739e85 to your computer and use it in GitHub Desktop.
Save iamaddy/4345eb0491e3254a2833486410739e85 to your computer and use it in GitHub Desktop.
Download ZIP
移动端拉起软键盘
Raw
focus show keyboard
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title>移动端呼起键盘</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="no"/>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="http//res.wx.qq.com/wechatgame/static/game/wgui/css/wgui.min.css?max_age=100000000">
<link rel="stylesheet" href="http://res.wx.qq.com/wechatgame/static/game/dist/css/style-game-post.5f9838b8.css?max_age=100000000">
<link rel="stylesheet" href="http://res.wx.qq.com/wechatgame/static/game/dist/css/style-frontpage.57996c7d.css?max_age=1100000000">
<style type="text/css">
.search_dark {
background-color: #f0eff5;
}
.search_dark .search-box {
background-color: #fff;
}
</style>
</head>
<body>
<div id="search_bar" class="search search_dark" style="display: none;">
<div id="search_box" class="search-box">
<i class="icon-search"></i>
<span class="search-text">搜索话题</span>
<form style="width:100%;" onsubmit="return false"><input style="width:100%;box-sizing: border-box;" id="j_input" type="search" class="search__input" placeholder="搜索话题"></form>
<span style="display: none;" id="j_clear" class="search__icon_cancel">
<i></i>
</span>
</div>
<a id="j_refer" class="search__cancel-button" style="display: none;">取消</a>
</div>
<div id="top_header" class="entry-head entry-head_c" style="margin-bottom: 0.3rem;">
<div class="entry-head__title ui-bb_1px">
<img id="group_icon" alt="game_icon" class="entry-head__game-logo" src="http://mmocgame.qpic.cn/wechatgame/mEMdfrX5RU3skibAqt732QvILol4OibMRRNbbdrZFvtZHAdTbYzAYsQGet4K7Lr7jD/0">
<div class="entry-head__action">
<div id="profile_me" class="entry-head__action-profile _js_jumpProfile" open_id="g1NlbyqjE3w4ec_3_aGsmmMbZg2U"><i></i></div>
<div id="j_search_btn" class="entry-head__action-search">
<label id="j_input_label" class="entry-head__action-input"></label>
</div>
</div>
<div id="j_game_name_div" class="entry-head__game-name _js_jumpMoreCircle"><span id="group_name" class="">王者荣耀</span></div>
</div>
</div>
<!-- <div>
<input style="display:none;" type="password" name="pass" id="text1" />
<label id="j_input_label" style="margin-left:300px">User</label>
</div> -->
<script type="text/javascript">
(function () {
var isAndroid = /android/i.test(navigator.userAgent);
var isIos = /(ios|ipad|iphone)/i.test(navigator.userAgent);
var invisibleInputID = 'j_inputs';
function $(id){
return document.getElementById(id);
}
var _input = $('j_input');
var btn = $('j_input_label');
var cancleBtn = $('j_refer');
function createInvisibleInput () {
var input = document.createElement('input');
input.type = 'text';
input.style.cssText = 'display:block;position: absolute;z-index: -1;left:-1000px;top:0';
input.id = invisibleInputID;
document.body.appendChild(input);
}
if(isAndroid){
createInvisibleInput();
$('j_input_label').setAttribute('for', invisibleInputID);
}
cancleBtn.addEventListener('click', function(evt){
_input.blur();
document.getElementById('search_bar').className = 'search search_dark';
_input.value = '';
document.getElementById('search_bar').style.display = 'none';
$('top_header').style.display = '';
this.style.display = 'none';
evt.stopPropagation();
});
btn.addEventListener('touchstart', function(evt){
if(isIos){
evt.preventDefault();
evt.stopPropagation();
controlUI();
}else{
// 150 魔法数字，如果android拉不起键盘，可以适当加大一点
setTimeout(function(){
controlUI();
}, 150);
}
});
function controlUI(){
//_input.style.display = 'block';
//btn.style.display = 'none';
$('top_header').style.display = 'none';
document.getElementById('search_bar').className = 'search search_focus search_typing ';
$('search_bar').style.display = '';
$('j_refer').style.display = '';
_input.focus();
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment