Angular, how to select the contents of a text input, with onClick() event on a button?

Question

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

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
– charlietfl, Commented Apr 27, 2015 at 1: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
– sertfs, Commented Apr 27, 2015 at 2:09

Ron · Accepted Answer · 2015-04-27 01:46:31Z

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

edited Apr 27, 2015 at 1:46

answered Apr 27, 2015 at 1:39

Ron

6,8092 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

charlietfl Over a year ago

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

Ron Over a year ago

@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?

charlietfl Over a year ago

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 Over a year ago

But adding a demo link obviously helps

sertfs Over a year ago

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

Praveenkumar Beedanal · Accepted Answer · 2019-04-02 14:40:30Z

2

Simple way to do is using click event.

for example

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

answered Apr 2, 2019 at 14:40

Praveenkumar Beedanal

83213 silver badges23 bronze badges

1 Comment

Omid Farvid Oct 15 at 14:56

Property 'select' does not exist on type 'EventTarget'.

Collectives™ on Stack Overflow

Angular, how to select the contents of a text input, with onClick() event on a button?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related