个人中心
gpt4 book ai didi

javascript - 将焦点放在添加的项目上

转载 作者：行者123 更新时间：2023-11-29 23:50:12 26 4
gpt4 key购买 nike

我想制作一个项目列表，双击一个项目可以编辑它。目前，在编辑项目时，在外部单击(即 blur)或通过键盘输入会提交新值。

现在，我想添加一个 + 图标来将项目添加到列表中。 单击 + 图标后，我希望焦点(并双击)在添加的项目上，以便我们可以直接对其进行编辑。

有人知道如何实现吗？

JSBin 

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <style>
    input {
      font-size: 20px;
      border:none;
      background-color:transparent;
    }
  </style>
</head>
<body ng-app="app" ng-controller="Ctrl">
  <table>
    <tr ng-repeat="item in items">
      <td>
        <input type="text" value="{{item.name}}" ng-blur='eEditable = -1' ng-readonly='$index !== eEditable' ng-dblclick="eEditable = $index" ng-keypress="keypress($event)"/>
      </td>
    </tr>
  </table>
  <div ng-click="add()">+</div>
  <script>
    var app = angular.module('app', []);
    app.controller('Ctrl', ['$scope', function ($scope) {
      $scope.items = [{ name: "item #1" }, { name: "item #2" }, { name: "item #3" }];
      $scope.eEditable = -1;
      $scope.keypress = function ($event) {
        if ($event.keyCode === 13)
          $event.target.blur()
      }
      $scope.add = function () {
        $scope.items.push({name: "new"});
      }
    }])
  </script>
</body>
</html>

最佳答案

当我在 Angular 上遇到这样的问题时，有时求助于 jQuery 会更容易。

$scope.add = function () {
$scope.items.push({name: "new"});
$scope.eEditable = $scope.items.length-1;
window.setTimeout(function() {
      $("table tr:last td input").focus();
}, 0);

https://jsbin.com/yegokobuna/edit?html,output

我将 jQuery 代码推送到 window.setTimeout(..., 0) 中，以便在 Angular 框架完成渲染 HTML 元素后调用代码。

这不是一个很好的解决方案。它更难维护，因为 Controller 代码现在需要对呈现的 HTML 有深入的了解。比方说，如果我要修改 View 以在一系列 div 而不是表格行中显示项目，那么我也必须去更改 Controller 代码。

关于javascript - 将焦点放在添加的项目上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42939739/

26 4 0
文章推荐： javascript - Ionic 1 : make ion-nav-bar fixed, 不在 View 之间更新
文章推荐： javascript - 以编程方式设置 dijit NumberSpinner 值
文章推荐： javascript - 从 socket.io 获取断开连接的用户
文章推荐： javascript - 使用 JSON 自动完成
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com