maa*_*nus 5 html javascript jquery keydown angularjs
我有一个(自制)表,有几个物理行和许多逻辑行,我想用键盘滚动(也).如果一个后代被聚焦,它理解了键,我希望事件由后代处理并被我的表忽略.
也许代码说清楚了:
scroll.keydown = function(e) {
if (e.shiftKey | e.controlKey | e.altKey) return;
var isText = e.target.type === "text";
var K = $.ui.keyCode;
switch (e.keyCode) {
case K.HOME: if (isText) return; scroll.move(-1000000); break;
case K.END: if (isText) return; scroll.move(+1000000); break;
case K.PAGE_UP: scroll.move(-10); break;
case K.PAGE_DOWN: scroll.move(+10); break;
case K.UP: scroll.move(-1); break;
case K.DOWN: scroll.move(+1); break;
default: return;
}
e.preventDefault();
};
<table tabindex="0" ng-keydown="scroll.keydown($event)" ...>
... <input ...>
它工作得很完美,但它非常愚蠢:表知道它包含input元素,并且它知道这样的元素可以利用例如HOME密钥,所以它做了一个测试,不管它.
那是非常错的.现在,我添加了一个select,在这种DOWN情况下需要进行类似的测试以保持其正常工作.
有趣的是,ng-keydown我的表中有另一个使用组件,它处理事件非常相似,但没有问题:
DOWN我的内部组件聚焦时按下它,它首先进入事件,一切都很好.DOWN在select聚焦时按下,我的表首先获取事件并滚动.我想要什么,而不是,是选择正常打开.使用angularjs v1.5.0和1.12.1在Chromium Version 60.0.3112.113中测试.
http://plnkr.co/edit/nr2JVJU1U16465F1WKkC?p=preview
PAGE_UP没有任何意义input,因此表格应该滚动,即使聚焦的子进程处理其他一些事件,例如HOME.if (isText) return;到HOME并且END只有哪些是有用的input而不是其他键,而不是.小智 0
我已经获取了你的 plunkr 的代码并做了一个很小的更改来帮助你得到你想要的东西。
在$scope.keydown函数的最顶部，我添加了一个条件来检查目标是输入还是选择，然后它将忽略滚动。
这适用于 nodeName 属性，如下所示（检查$scope.keydown函数）：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
var data = [];
for (var i = 0; i < 10000; ++i) data.push({
id: i,
value: i * i
});
var scroll = $scope.scroll = {
start: 0,
limit: 10,
move: function(delta) {
var start = scroll.start + delta;
start = Math.max(start, 0);
start = Math.min(start, data.length - scroll.limit);
scroll.start = start;
},
keydown: function(e) {
// With the e.target.nodeName you can
// can check if the keydown is being
// triggered from the input or the select
// and then avoid the table scroll
if(e.target.nodeName === 'INPUT' || e.target.nodeName === 'SELECT') {
return false;
}
if (e.shiftKey | e.controlKey | e.altKey) return;
var isText = e.target.type === "text";
var K = $.ui.keyCode;
switch (e.keyCode) {
case K.HOME:
if (isText) return;
scroll.move(-1000000);
break;
case K.END:
if (isText) return;
scroll.move(+1000000);
break;
case K.PAGE_UP:
scroll.move(-10);
break;
case K.PAGE_DOWN:
scroll.move(+10);
break;
case K.UP:
scroll.move(-1);
break;
case K.DOWN:
scroll.move(+1);
break;
default:
return;
}
e.preventDefault();
},
};
$scope.visibleData = [];
$scope.$watchCollection("scroll",
function() {
for (var i = 0; i < scroll.limit; ++i) {
$scope.visibleData[i] = data[i + scroll.start];
}
});
});table:focus {
border: 1px solid red;
}
table {
border: 1px dotted blue;
}<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="jquery-ui@1.10.4" data-semver="1.10.4" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li>Click in the input</li>
<li>Press Shift-Tab</li>
<li>Observe thar arrow-up and down control the outer select.</li>
<li>Pres Tabl twice</li>
<li>Observe that the the arrows scroll the table instead!</li>
</ul>
<select name="outer">
<option>first</option>
<option>second</option>
</select>
<table tabindex="1" ng-keydown="scroll.keydown($event)">
<tr>
<td>
<input name="unused">
</td>
<td>
<select name="select">
<option>first</option>
<option>second</option>
</select>
</td>
</tr>
<tr>
<th>row</th>
<th>value</th>
</tr>
<tr ng-repeat="x in visibleData">
<td>{{x.id}}</td>
<td>{{x.value}}</td>
</tr>
</table>
</body>
</html>