关于移动端采用angular实现搜索时的软键盘绑定

今天在实现后台已经封装号的模糊查询接口的搜索效果时,我想要实现的效果是,搜索input在软键盘输入完成点击“搜索”,发送http请求。

此要求就需要实现软键盘键值的监听与获取。在网上搜索结果(http://www.jb51.net/article/119743.htm)后自己试验成功。

先贴出自己的代码,供参考。

html:

<header id ="mheader" ng-controller = "minquiryctrl">
<input type="search" id="msearch" placeholder = "搜索" ng-model = "mminquiry" ng-keyup = "forSearch($event)">
<i id="search"><img src="./images/index/title_icon_search.png" alt=""></i>

<div id="clock"><img src="./images/index/title_icon_history.png" alt=""></div>
<!---->

</header>

js:

//查询部分的数据填充
var minquirys = angular.module("minquiry",[]);
minquirys.controller("minquiryctrl",function($scope,$http){
$scope.forSearch = function($event){
console.log("------------------------------------------");
console.log("搜索事件开启");
console.log("搜索参数"+$scope.mminquiry);
var marg = $scope.mminquiry;
var mjson = {
    "action": "XXX",
    "param": {
        "wikiName": marg,
        "tag": "",
        "page": 1,
        "pagesize": 8
    }
}
var keycode = $event.keyCode;
if(keycode===13){
$http({
method:'post',
url:"/Epg",
data:mjson,
}).then(function(data){
console.log("请求发送成功");
$scope.hotvideos = data.data.wikis;
alert($scope.hotvideos);
}).catch(function(){
alert("数据呢?");
});
}
}


});

angular.bootstrap(document.getElementById("mheader"), ['minquiry']);




更多的方案请查看我上面复制的链接。我只试了第一种方案。

猜你喜欢

转载自blog.csdn.net/weixin_40098371/article/details/80368361