MUI点击发送按钮后不关闭软键盘

向右看齐 2021-10-19 07:28 501阅读 0赞

### 概述 ###

首先我使用 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>
    			
    			<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>