当前位置: 首页 > 面试题库 >

提前输入控件的向上/向下箭头键问题(角度引导UI)

慕容嘉熙
2023-03-14
问题内容

勾选此PLNKR,我已经实现预输入型控制,默认情况下,提前控制,他们不设置任何最大高度或高度名单,但按规定我必须列出的修复高度110px。因此,当我们一次拥有更长的列表时,将仅显示4个数据,而向下滚动则可以看到其余数据。当用户单击向上/向下滚动箭头时,滚动正常,但不适用于键盘上/向下键。

该问题的解释步骤如下:

1.输入一些东西(例如“ a”)以提前输入数据(将填充列表)
2. 按向下箭头键(焦点将在列表项上)
3. 按向下箭头键4-5次以进一步向下移动(当我们向下移动到列表时,滚动不会移动。)
4. 它始终显示列表中的前4个项目。理想的行为是应该改变。
用户可以通过手动单击滚动来滚动,但是使用箭头键不会滚动。

HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
 <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
 <script src="example.js"></script>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 <link href="style.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
  <h4>Static arrays</h4>
  <pre>Model: {{selected | json}}</pre>
  <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
 </div>
</body>
</html>

CSS

.dropdown-menu{
 height:110px;
 overflow:auto;
}

javascript datalist

$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

问题答案:

以下是我需要使其生效的更改:

在typeaheadMatch指令中添加了以下行(plunker中的ui.bootstrap.typeahead.js文件的第335行)

element[0].focus();

添加的shouldFocus指令(行-314 -350)

.directive('shouldFocus', function(){
  return {
   restrict: 'A',
   link: function(scope,element,attrs){
     scope.$watch(attrs.shouldFocus,function(newVal,oldVal){
       element[0].scrollIntoView(false);
     });
   }
 };
})

最后在li(第372行)中添加了指令

should-focus=\"isActive($index)\"


 类似资料:
  • 此代码打印出用户在按下回车键后键入的内容。 现在我想让它检测当用户按下向上/向下箭头,打印出“向上/向下箭头按下”,而不需要按回车键。 想使用虚拟密钥代码与GetKeyState(),但不能完成它。 关于如何实现这样的目标有什么想法吗。 提前谢谢。

  • 如何在按钮中显示向上箭头符号?分别,我希望它在单击向下箭头时发生更改。我该怎么做?? 我试过了,但是。。。。

  • 我发现了很多相关的问题(这里和其他地方),但没有具体找到这个问题。 我正在尝试侦听箭头键(37-40)的键关闭事件,但是当以特定顺序使用箭头键时,后续箭头不会生成“keydown”事件。 示例:http://blog.pothoven.net/2008/05/keydown-vs-keypress-in-javascript.html 在该页面上,单击“在此处键入 - 但是,如果我做同样的事情,但

  • 我已经安装了AndroidStudio的最新金丝雀版本,并遵循了这一点(https://developer.android.com/topic/libraries/architecture/navigation/navigation-implementing)实现简单两页导航的说明。基本上,page1有一个按钮,当点击它时,应用程序显示page2。 这是可行的,但有一个问题。。。它似乎不会自动对操

  • 我正在用ARKIT实现一个导航软件。我想用箭头显示路径,但我不知道如何设置箭头的正确方向。 现在,我的所有箭头都指向相同的方向,如下所示:Picture_1 下面是我的代码 现在我希望像这样改变箭头方向:Picture_2 我该怎么做呢?是否可以根据下一个节点的位置改变箭头的方向?多谢了。

  • 我有一个单页角应用与Spring引导。它看起来如下所示: Spring Boot正确地默认为webapp文件夹,并为index.html文件服务。 我想做的是: