MUI在搜索框输入内容后，将手机软键盘右下角的换行变成搜索
程序员文章站
2022-04-20 14:37:22
...
只需要在input搜索框的外边在加一层form标签，并将搜索的js方法写到onsubmit里边即可，HTML代码如下：
<div class="mui-bar mui-bar-nav nav_search">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<form onsubmit="return search()">
<div class="mui-input-row mui-search searchDiv">
<input id="searchInput" type="search" class="mui-input-clear nav-search" placeholder="">
</div>
</form>
<a id="search" class="mui-icon mui-icon-search mui-pull-right" onclick="search()"></a>
</div>但是会出现一个问题，就是第一次点击的时候会刷新一次页面，很影响用户体验，所以还需要在search()方法中return false即可，js代码如下：
function search() {
var search = document.getElementById("searchInput").value.trim();
if(search == "" && keyWords!=""){
search = keyWords;
}
if(search=="" || search == null){
mui.toast("搜索内容不能为空");
return false;
}else{
mui.openWindow({
url:'search-list.html',
id:'search-list',
styles:{
scrollIndicator:'none',
popGesture:'close'
},
show:{
aniShow: 'slide-in-right',
autoShow: true,
},
extras:{
searchKeys:search
},
waiting:{
title:'正在加载...',//等待对话框上显示的提示内容
}
})
document.activeElement.blur();//隐藏软键盘
}
return false;
}