移动App开发 MUI框架利用软键盘的搜索键实现页面跳转并传值

最新推荐文章于 2023-07-27 20:53:07 发布

popatoegg

最新推荐文章于 2023-07-27 20:53:07 发布

阅读量3.9k

点赞数 1

分类专栏： MUI框架软键盘文章标签： MUI框架移动App 搜索跳转软键盘

本文链接：https://blog.csdn.net/popatoegg/article/details/78935466

版权

MUI框架软键盘专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首页

html

<body>
	<input type="text" name="search" id="search" value="" />
</body>

javascript

<script type="text/javascript" charset="utf-8">
	mui.init();
	mui.plusReady(function() {
		var search = document.getElementById("search");
//				监听input框键盘事件
		search.addEventListener("keypress", function(e) {
			console.log(e.keyCode);
			var ad = search.value;
//					当e.keyCode的值为13 即，点击前往/搜索 按键时执行以下操作
			if(e.keyCode == 13) {
				mui.openWindow({
					url: "search.html",//跳转地址
					id:"search",//id
					show: {
						aniShow: "slide-in-right",//页面显示动画，默认为”slide-in-right“；
						duration: 300,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒
						autoShow: true //页面loaded事件发生后自动显示，默认为true
					},
					 extras:{
				      text1:ad//自定义扩展参数，可以用来处理页面间传值
				    },
					waiting: {
						title: '正在玩命搜索...'//等待对话框上显示的提示内容
					}
				})
			}
		});
	});
</script>

跳转页

html

<body>
	<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">跳转页</h1>
	</header>
	<div class="mui-content">
	    <h1 id="getText"></h1>
	</div>
</body>

javascript

<script type="text/javascript">
	mui.init()
		mui.plusReady(function(){
			//获取当前窗体对象
			var page = plus.webview.currentWebview();
			//接受上一页面传过来的值；
			var a = page.text1;
			console.log(a);
			document.getElementById("getText").innerHTML = a;
		})
</script>

popatoegg

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
移动App开发 MUI框架利用软键盘的搜索键实现页面跳转并传值

首页html javascript mui.init(); mui.plusReady(function() { var search = document.getElementById("search");// 监听input框键盘事件 search.addEventListener("keypress", function(e) { conso
复制链接

扫一扫