ionic js input光标重新定位

最新推荐文章于 2021-11-12 17:28:10 发布

原创最新推荐文章于 2021-11-12 17:28:10 发布 · 4.3k 阅读

0 ·

CC 4.0 BY-SA版权

js ionic angularjs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的输入框键盘事件处理方法，包括如何监听键盘按键、处理特定按键（如回车、删除和退格键）的逻辑，并通过JavaScript实现了银行卡号输入时的格式化效果。

html 代码：

<body ng-app="order" ng-controller="orderXqCtl">
	<ion-view>
		<ion-content>
			...
			<input type="text" style="padding:0;" ng-model="card" ng-click=""  ng-keyup="duan($event)" id="kh">
                        ...

js 代码：

.controller('bankEditCtl', function ($scope, $http, $ionicBackdrop) {
        ...
        $scope.duan = function (e) {
            var keycode = window.event ? e.keyCode : e.which;
            console.log(keycode);
            if (keycode != 13 && keycode != 8 && keycode != 46) {
            	var index_focus = e.target.selectionStart;//获取当前鼠标光标
                document.getElementById("kh").value = document.getElementById("kh").value.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");//执行空格填充之后，光标会被定位到末尾
                if (index_focus>4 && index_focus%5 == 0){//防止填充空格的影响
                	index_focus+=1;
                }
                document.getElementById("kh").setSelectionRange(index_focus, index_focus); //重新定位光标位置
            }
        };