CODEWITHSUNDEEP
htmlangular
Harshit
Harshit

Reputation: 1565

How to hide blinking cursor in Angular 2?

I was working on search bar where user input the keyword. When the user hit the enter key, results are displayed. I want to implement in this way - enter image description here

Whenever, user hits enter to search results for a keyword, you can see there is no blinking cursor at the end of keyword. This don't happen when you go to google.com and click on input box. At that time, we see a blinking cursor.

The problem I'm facing is that, when a user hits enter key, results are displayed but cursor remains blinking in search bar. What should I do to solve this problem so that clicking on input box should display a blinking cursor but on hitting enter key, it hides blinking cursor ?

NOTE - Since I don't know, how this problem is being generated I haven't provided the code. I just wanted to have some rough idea with code how should I proceed. :)

Upvotes: 0

Views: 3042

Answers (1)

user8116198
user8116198

Reputation:

This is done by taking the focus away from the input field, which requires a tiny bit of javascript.

I don't know how your code works as you aren't providing the code but form submit would be I imagine, how you would trigger the action on enter?

So I'll do a quick example...

We have a form which is populated with an input field.

var form = document.querySelector('#form');
var input = document.querySelector('#text');

form.onsubmit = function(e) {
  e.preventDefault();
  text.blur();
}
<form id="form">
  <input type="text" id="text">
</form>

Using .blur takes the focus away from the input.

I miss read your question and saw that you were doing this with Angular, however I will leave the original answer there for anyone else that may stumble upon this answer.

To do it in Angular, it has a lovely attribute of ng-enter.

We can then add this to the input by doing <input type="text" ng-enter="$scope.blur()" />

Then we can create this action by doing

$scope.blur = function($event) {
    var input = $event.target;

    input.blur();
}

Upvotes: 1

Related Questions