2

I am newbie to Angular and web development, I have a text input area that needs to be selected (highlighted) when a button is clicked in Angular.

do I need to something like angular.element(document.getElelmentById(txt1)) and do select on it?

Similar to this thread: Selecting all text in HTML text input when clicked , the question is, is there a rightway/better way to do this in Angular?

I have searched for an answer, closest I could get was this thread: How to set focus on input field? but couldn't successfully convert the suggestions for select().

Here is my jsfiddle in plain js: http://jsfiddle.net/x62ye14y/, a translation to angular would be greatly appreciated.

<!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>

Here is the code I have so far,:

    <!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

Community
  • 1
  • 1
sertfs
  • 21
  • 1
  • 1
  • 3
  • possible duplicate of [How to set focus on input field?](http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field) – Arun Poudel Apr 27 '15 at 01:38
  • angular has it's own directives for all of the most common events. You would use `ng-click` in angular. . Strongly suggest going through the phoneCat tutorial on angular documentation site end to end – charlietfl Apr 27 '15 at 01:38
  • Thanks. I am trying to use ng-click on a button, but wouldn't the element in that case refer the button? and not the txt in the txt box? Am working thru the phonecat tutorial. – sertfs Apr 27 '15 at 02:09

2 Answers2

3

Simple way to do is using click event.

for example

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

Praveenkumar Beedanal
  • 774
  • 11
  • 20
2

Can you try this:

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));

you just need to move the select-on-click to a button

Ron
  • 5,900
  • 2
  • 20
  • 30
  • your answer should contain the full code . if you are creating a whole new directive in html put the js here too. Also a bug in your directive in that events outside of angular that modify scope need to tell angular to run digest – charlietfl Apr 27 '15 at 01:42
  • @charlietfl ok, I've added it, but I don't really understand why I have to include it here, if it is already in the link... isn't that unnecessary? how does it help being here, if it cannot be executed/tested... but the user would rather use the link to actually test the code before trying to implement it? – Ron Apr 27 '15 at 01:48
  • 1
    Yes...the whole idea of this site is answers should be standalone. Consider future visitors with a problem and all they see is 10 answers , no code and 10 links. Also OP with multiple answers to compare...should they open multiple tabs on multiple sharing sites? – charlietfl Apr 27 '15 at 01:53
  • But adding a demo link obviously helps – charlietfl Apr 27 '15 at 01:55
  • Thankyou Ron. What I am actually trying is to get the element selected when another element (button or icon) is clicked. In that case, wouldn't the element refer to the button instead of the txt? (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)); – sertfs Apr 27 '15 at 02:07