角度，如何选择文本输入的内容，按钮上有 onClick() 事件

我是 Angular 和 Web 开发的新手，我有一个文本输入区域，当在 Angular 中单击按钮时需要选择（突出显示）。

我是否需要像angular.element（document.getElelmentById（txt1））这样的东西并选择它？

与此线程类似：单击时选择HTML文本输入中的所有文本，问题是，在Angular中是否有正确/更好的方法

？

我已经搜索了一个答案，我能得到的最接近的是这个线程：如何在输入字段上设置焦点？但无法成功转换 select（）的建议。

这是我在普通 js 中的 jsfiddle：http://jsfiddle.net/x62ye14y/，翻译成 angular 将不胜感激。

<!DOCTYPE html>
<html>
<body>
Select your favorite fruit:
<input type="text" id="id123" placeholder="ENTER VALUE">
<p>Click the button to select text in the textbox</p>
<button onclick="myFunction()">Select Txt</button>
<script>
function myFunction() {
    document.getElementById("id123").select();
}
</script>
</body>
</html>

这是我到目前为止的代码：

    <!DOCTYPE html>
<html ng-app="demo">
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
  </head>
  <body>
    <div ng-controller="DemoCtrl">
      <input type="text" ng-model="content" id="txt1"/>
      <button ng-click="selectOnClick()">Select Txt</button>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js">
    </script>
        <script type="text/javascript">
          var mod1 = angular.module('demo', []);
          mod1.controller('DemoCtrl', function ($scope) {
              $scope.content = 'some text';
            });
          mod1.directive('selectOnClick', function () {
            // Linker function
            var element1 = angular.element("txt1");
            element1.select();
          });
        </script>
      </body>
    </html>

http://plnkr.co/edit/DKxAs4QfkLzwAYPxx7tW?p=preview

简单的方法是使用click事件。

例如

<input type = "text" (click) = "$event.target.select()">

你能试试这个吗：

http://plnkr.co/edit/PzcINVKw6KNBFxlZUgAS?p=preview

      <!DOCTYPE html>
<html ng-app="demo">
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
  </head>
  <body>
    <div ng-controller="DemoCtrl">
      <input type="text" ng-model="content" select-on-click />
      <p>Content: {{content}}</p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

.app：

(function (angular) {
  var module = angular.module('demo', []);
  module.controller('DemoCtrl', function ($scope) {
    $scope.content = 'foobar';
  });
  module.directive('selectOnClick', function () {
    // Linker function
    return function (scope, element, attrs) {
      element.bind('click', function () {
        this.select();
      });
    };
  });
}(angular));

您只需要将单击时选择移动到一个按钮

相关内容

最新更新

热门标签：