概述
首先我使用 return false 仍然会关闭软键盘
使用的是MUI项目下的模板，精简了代码，没具体搞明白到底是如何实现不关闭软键盘的
因为我照着敲，软键盘也会关闭。只能copy下来再去修改自己的代码
部分js和css的路径需要修改
代码
<!documentTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<link href="../css/mui.imageviewer.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
footer {
position: fixed;
width: 100%;
height: 50px;
min-height: 50px;
border-top: solid 1px #bbb;
left: 0px;
bottom: 0px;
overflow: hidden;
padding-right:50px;
padding-left: 5px;
background-color: #fafafa;
}
.footer-right {
position: absolute;
width: 50px;
height: 50px;
right: 0px;
bottom: 0px;
text-align: center;
vertical-align: middle;
line-height: 100%;
padding: 12px 5px;
display: inline-block;
}
.footer-center {
height: 100%;
padding: 5px 0px;
}
.footer-center [class*=input] {
width: 100%;
height: 100%;
border-radius: 5px;
}
.footer-center .input-text {
background: #fff;
border: solid 1px #ddd;
padding: 10px !important;
font-size: 16px !important;
line-height: 18px !important;
font-family: verdana !important;
overflow: hidden;
}
.mui-content {
height: 100%;
padding: 44px 0px 50px 0px;
overflow: auto;
background-color: #eaeaea;
}
#msg-list {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.msg-item {
padding: 8px;
clear: both;
}
.msg-item .msg-user {
width: 38px;
height: 38px;
border: solid 1px #d3d3d3;
display: inline-block;
background: #fff;
border-radius: 3px;
vertical-align: top;
text-align: center;
float: left;
padding: 3px;
color: #ddd;
}
.msg-item .msg-user-img{
width: 38px;
height: 38px;
display: inline-block;
border-radius: 3px;
vertical-align: top;
text-align: center;
float: left;
color: #ddd;
}
.msg-item .msg-content {
display: inline-block;
border-radius: 5px;
border: solid 1px #d3d3d3;
background-color: #FFFFFF;
color: #333;
padding: 8px;
vertical-align: top;
font-size: 15px;
position: relative;
margin: 0px 8px;
max-width: 75%;
min-width: 35px;
float: left;
}
.msg-item .msg-content .msg-content-inner {
overflow-x: hidden;
}
.msg-item .msg-content .msg-content-arrow {
position: absolute;
border: solid 1px #d3d3d3;
border-right: none;
border-top: none;
background-color: #FFFFFF;
width: 10px;
height: 10px;
left: -5px;
top: 12px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.msg-item-self .msg-user,
.msg-item-self .msg-content {
float: right;
}
.msg-item-self .msg-content .msg-content-arrow {
left: auto;
right: -5px;
-webkit-transform: rotateZ(225deg);
transform: rotateZ(225deg);
}
.msg-item-self .msg-content,
.msg-item-self .msg-content .msg-content-arrow {
background-color: #4CD964;
color: #fff;
border-color: #2AC845;
}
footer .mui-icon {
color: #000;
}
footer .mui-icon:active {
color: #007AFF !important;
}
footer .mui-icon-paperplane:before {
content: "发送";
}
footer .mui-icon-paperplane {
/*-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);*/
font-size: 16px;
word-break: keep-all;
line-height: 100%;
padding-top: 6px;
color: rgba(0, 135, 250, 1);
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#h {
background: #fff;
border: solid 1px #ddd;
padding: 10px !important;
font-size: 16px !important;
font-family: verdana !important;
line-height: 18px !important;
overflow: visible;
position: absolute;
left: -1000px;
right: 0px;
word-break: break-all;
word-wrap: break-word;
}
</style>
</head>
<body contextmenu="return false;">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Sakura</h1>
</header>
<pre id='h'></pre>
<script id='msg-template' type="text/template">
<% for(var i in record){ var item=record[i]; %>
<div class="msg-item <%= (item.flag==1?' msg-item-self':'') %>"' msg-content='<%=(item.msg)%>'>
<% if(item.flag==1 ) { %>
<i class="msg-user mui-icon mui-icon-person"></i>
<% } else { %>
<img class="msg-user-img" src="../images/logo.png" alt="" />
<% } %>
<div class="msg-content">
<div class="msg-content-inner">
<%=( item.msg|| ' ') %>
</div>
</div>
</div>
<% } %>
</script>
<div class="mui-content">
<div id='msg-list'>
</div>
</div>
<footer>
<div class="footer-center">
<textarea id='msg-text' type="text" class='input-text'></textarea>
</div>
<!-- for属性是指与指定表单元素绑定 -->
<label for="" class="footer-right">
<i id='msg-type' class="mui-icon mui-icon-paperplane"></i>
</label>
</footer>
<script src="../js/mui.min.js"></script>
<script src="../js/arttmpl.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
gestureConfig: {
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold: true, //默认为false，不监听
release: true //默认为false，不监听
}
});
template.config('escape', false);
if (mui.os.ios) {
// 解决在ios上fixed元素focusin时位置出现错误的问题
document.addEventListener('DOMContentLoaded', function() {
var footerDom = document.querySelector('footer');
document.addEventListener('focusin', function() {
footerDom.style.position = 'absolute';
});
document.addEventListener('focusout', function() {
footerDom.style.position = 'fixed';
});
});
}
mui.plusReady(function() {
plus.webview.currentWebview().setStyle({
softinputMode: "adjustResize"
});
var record = [{
flag: 2,
msg: 'Hi，我是 MUI 小管家！'
}];
var ui = {
body: document.querySelector('body'),
footer: document.querySelector('footer'),
footerRight: document.querySelector('.footer-right'),
boxMsgText: document.querySelector('#msg-text'),
boxMsgSound: document.querySelector('#msg-sound'),
btnMsgImage: document.querySelector('#msg-image'),
areaMsgList: document.querySelector('#msg-list'),
h: document.querySelector('#h'),
content: document.querySelector('.mui-content')
};
// <pre id='h'></pre>这一句的作用是改变输入框高度,pre是能保留包裹的text中的空格和换行
// 但这里里边的内容没显示,只是把输入框的值和属性赋给他,以便能改变输入框的高度
ui.h.style.width = ui.boxMsgText.offsetWidth + 'px';
// alert(ui.boxMsgText.offsetWidth );
var footerPadding = ui.footer.offsetHeight - ui.boxMsgText.offsetHeight;
var bindMsgList = function() {
ui.areaMsgList.innerHTML = template('msg-template', {
"record": record
});
ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;
};
bindMsgList();
window.addEventListener('resize', function() {
ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;
}, false);
var send = function(msg) {
record.push(msg);
bindMsgList();
};
function msgTextFocus() {
ui.boxMsgText.focus();
setTimeout(function() {
ui.boxMsgText.focus();
}, 150);
}
//解决长按“发送”按钮，导致键盘关闭的问题；
ui.footerRight.addEventListener('touchstart', function(event) {
msgTextFocus();
event.preventDefault();
});
//解决长按“发送”按钮，导致键盘关闭的问题；
ui.footerRight.addEventListener('touchmove', function(event) {
msgTextFocus();
event.preventDefault();
});
ui.footerRight.addEventListener('release', function(event) {
//showKeyboard();
ui.boxMsgText.focus();
setTimeout(function() {
ui.boxMsgText.focus();
}, 150);
send({
flag: 1,
msg: ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '<br/>')
});
ui.boxMsgText.value = '';
mui.trigger(ui.boxMsgText, 'input', null);
}, false);
ui.boxMsgText.addEventListener('input', function(event) {
// ui.btnMsgType.setAttribute("for", ui.boxMsgText.value == '' ? '' : 'msg-text');
ui.h.innerText = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '\n-') || '-';
ui.footer.style.height = (ui.h.offsetHeight + footerPadding) + 'px';
// console.log(ui.h.offsetHeight);
ui.content.style.paddingBottom = ui.footer.style.height;
});
var focus = false;
ui.boxMsgText.addEventListener('tap', function(event) {
ui.boxMsgText.focus();
setTimeout(function() {
ui.boxMsgText.focus();
}, 0);
focus = true;
setTimeout(function() {
focus = false;
}, 1000);
event.detail.gesture.preventDefault();
}, false);
//点击消息列表，关闭键盘
ui.areaMsgList.addEventListener('click', function(event) {
if (!focus) {
ui.boxMsgText.blur();
}
})
});
</script>
</body>
</html>
