How to Check If Input Field Is in Focus or Not

How do I check if input field is in focus or not?

I think you need this type of a checking:

var hasFocus = $('#idOfTheInputElement').is(':focus');
if(hasFocus){
    //logic here
}

Check if an input field has focus in vanilla JavaScript

This question was answered here: Javascript detect if input is focused

Taken from the above answer:

this === document.activeElement // where 'this' is a dom object

Checking if my input box has been click or is 'in focus' pure js

You nearly got it right. A few minor mistakes:

to listen to the focus event. onfocus isn't an event.
the keyup event is for listening when a keyboard button is released (following a keydown event). If you want to listen to a mouse click, use the click event.

var inputBox = document.getElementById("search-stuff");if (inputBox) {  inputBox.addEventListener('click', function() {    startSearch();  });  inputBox.addEventListener('focus', function() {    searchBoxClicked();  });}
function searchBoxClicked() {  console.log('focus');}
function startSearch() {  console.log('click');}

<input type="text" id="search-stuff" placeholder="search" />

How do I check if input box is focused with jquery?

$(function(){
    $("#name").focus(function(){
       //Code here
    });
});

If this doesn't work ^^
My guess is that jQuery isn't initialized in your HTML document correctly or your script tag isn't at the bottom of your body tag.

Example: https://codepen.io/HenrikDK/pen/NWGpPbK

Detect when input focuses

In your case you are detecting if the element is active during the script's run, so you get false. After it you don't have any detectors. So you need to use addEventListener() function and add handler for focus event. It will fire when element is focused.

document.getElementById('inp').addEventListener('focus', function(){  console.log('Focused');});

<input id="inp" />

Check if input has focus

If you are using angularjs 1.2 you have two directives to help you to watch if a field has focus: ng-focus and ng-blur. If not, it's quite simple to implement your own directives. The code (plunker):

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
       <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <form>
       <input ng-model="name" id="name" ng-focus="focused()" ng-blur="blurred()">
       <input ng-model="name2">
    </form>
  </body>

</html>

and the javascript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.focused = function() {
    console.log("got focus");
  }

   $scope.blurred = function() {
    console.log("lost focus");
  }
});

If on the other hand, you just want validation, look into form validation in angularjs, something like myForm.myInput.$valid. Angularjs sets the ng-valid and ng-invalid classes accordingly.

Check if focus is on a textfield

To tell if one of your text fields is focused, add onfocus and onblur handlers to the text fields you want to watch and handle state changes in the onfocus handler. For example,

<script>
var textFieldInFocus;
function handleOnFocus(form_element)
{
   textFieldInFocus = form_element;
}
function handleOnBlur()
{
   textFieldInFocus = null;
}
</script>
<form>
  <input type="text" name="text1" onfocus="handleOnFocus(this)" onblur="handleOnBlur()"/>
  <input type="text" name="text2"/>
  <textarea name="textarea1" onfocus="handleOnFocus(this)" onblur="handleOnBlur()"></textarea>
</form>

Given the above code, you can have other JS code check textFieldInFocus to see if it is defined (a text field is currently focused) and the value will be the text field form element in focus. For example,

if(textFieldInFocus)
{
    alert("The textField that was currently focused is " + textFieldInFocus);
}

A shorter, easier way to add onfocus and onblur handlers would be to use jQuery, but since no mention was made, I wrote for a small, simple implementation.

Also, be careful when altering the default behavior of keyboard and mouse events as you can hamper accessibility devices that rely on behavior you yourself may not be able to test with.

Javascript/jQuery detect if input is focused

With pure javascript:

this === document.activeElement // where 'this' is a dom object

or with jquery's :focus pseudo selector.

$(this).is(':focus');