Question

我有这样的 HTML

<div class="row">
    <textarea id="txtArea" ng-model="input"
              ng-change="handleOnChange(input);getSearchField(input);"
              ng-click="search(input)" ng-focus="search(input);"
              ng-keyup="search(input)" rows="10" cols="50" tabindex="0">
    </textarea>
    <div>
        <ul ng-if="shouldSelect" id="dataList">
            <li ng-repeat="f in func | filter:searchField"
                ng-click="typeSelected(f)"> {{f}} </li>
        </ul>
        <ul ng-if="shouldShowSubType">
            <li ng-repeat="f in selectedSubType"
                ng-click="subTypeSelected(f)"> {{f}} </li>
        </ul>
    </div>
</div>

现在我想做的是，当我按下键时，我应该能够从列表中选择li，当我按下Enter键时，应该在textarea模型中添加li文本。我该如何实现？

更新

我尝试使用下面的代码，但仍然无法正常工作。

 $('#txtArea').keypress(function(event){
            if(event.keyCode == 40)
            {
                document.getElementById("dataList").focus();
            }
        });

因为ul没有得到关注。如果我将ul更改为select，则单击时功能不起作用。

Answer 1

您可以在文本区域中使用(keydown.ArrowDown)="onDown($event)，也可以在onDown函数中编写进一步的逻辑。

 <textarea id="txtArea" ng-model="input"
          ng-change="handleOnChange(input);getSearchField(input);"
          ng-click="search(input)" ng-focus="search(input);"
          (keydown.ArrowDown)="onDown($event)" rows="10" cols="50" tabindex="0">

，并且在您的打字稿文件中，您可以这样做。

 onDown(event){
    console.log(event.srcElement.value);
  }

在文本区域中按下向下键时选择li

1 个答案: