We Keep Coding

How to know if an input is clicked and unclicked in Javascript

I'm trying to figure out how to know when an input is clicked and when it is unclicked. Let me explain:
When ever you want to type something on an input field, you click on the input box and when you don't want to type, you click somewhere else and the input field is disabled.
<input type='text'>
Here as you can see, when you click on it, the field is enabled, and when you click somewhere else other than the field, it disables.
I just want to know when the field is disabled/unclicked.

When you click on the input field focus event is fired. When you lose focus blur event is fired.
var elem = document.getElementById("fname")
elem.addEventListener("blur", myFunction);
function myFunction() {
alert("Input field lost focus.");
}
<input type="text" id="fname">

I believe you're just looking for onFocus.
<input type='text' onFocus={/* do something */} />
Read more about React events here.

how to get highligted (blur) area in text box in angular javascript

I have a text element and I want to get the section that is highlighted selection by mouse only, so lets say user writes 123456798 in the textbox and then select 456 with mouse and I want to get 456, how can I do that ? Does angular library provide me something for it ? Couldnt find in methods.
Here is my complete html code for the part.
Actually I entered it but needed to remove first and last <> characters
<input type="text" id="dialpadText" call-from-dialpad="startAudioCall()"
ng-model="dialpadText"
ng-change="dialpadTextEntered()"
placeholder="Enter a name or number" autofocus=""
class="ng-valid ng-touched ng-dirty ng-valid-parse ng-modified">

If I understood your question correctly then you wants to get or alert the highlighted value being selected by mouse, right? If that is so, then here is the solution, simply with the help of JavaScript, you can alert the selected value of portion of the text:
<input type="text" onBlur = "getSelectionText()">
<script>
function getSelectionText(){
var selectedText = ""
if (window.getSelection){ // all modern browsers and IE9+
alert(window.getSelection()); //it will alert the selected value
}
}
</script>

jQuery handler to know when at least 1 character has been typed into an input text element

I have a simple input like the following:
<input type="text" id="foo">
I tried using change() in order to detect when at least 1 character has been keyed in. The problem is, the event doesn't fire off until the input text box has lost focus.
Is there another event I can bind to and be able to trigger some code when at least 1 character has been typed?

You can use jQuery's keydown(). You can also try keypress(), which fires when the key is down, or keyup(), which is when the key is lifted up.
These all fire after a single key, not upon losing focus.
Therefore, you can try:
$("#test").keydown(function() {
$("#console").prepend(
(($(this).val().length) ?
"Not Empty" :
"Empty")
+ "<br />"
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" />
<div id="console"></div>

You might give input a try.
$('#foo').on('input', function(){
if (this.value.trim().length) {
console.log('we got a char');
}
});
Input is filtered to be thing that change the actual input of the element. So you don't have to worry about random keys like function keys and stuff, enter press, etc.

How to know that some text is entered as well as cursor has come out of textbox?

I want to know if there is any event or way to know that some text has been entered into the textarea and also the user has come of the textarea, so that i can invoke some text like "success".
For the some values in the textarea i think we can do through val() function. But how to know that user has come out of the Textarea
My code is like:
<input type="textarea" id="link1"></textarea>

if (!$("#link1").val()) {
// textarea is empty
}
You can also use $.trim to make sure the element doesn't contain only white-space:
if (!$.trim($("#link1").val())) {
// textarea is empty or contains only white-space
}
and for detecting when user comes out of textarea
$('#link1').focusout(function() {
alert(this.id + " focus out");
});

Try to catch the onblur event and then check the value.length to see if there is a value added to the textbox.

textarea should be like
<textarea id="link1"></textarea>
events you are searching are onkeyup, onfocus and onblur

Using onKeyPress it can be detected weather some text has been entered
and onBlur it can be detected weather the user has come of the textarea
<input type="textarea" id="link1" onBlur = blured() onKeyPress = pressed()></textarea>

JavaScript: How to detect a non empty input text box

I am learning JavaScript and and am working on a To Do list type of application.
Idea: "Add" button is set to disabled in the HTML and only to be enabled when there is at least one character.
My code only works when there is at least 2 characters and can't workout why it doesn't detect the first character.
The other realted question is how do I set the "add" button back to disable if the input box content has been deleted.
HTML
<input id="addToListInput" onkeydown="buttonStatus()" value="" type="text"><input id="addToListButton" disabled type="submit" Value="Add to list" onClick="addToList(this)">
JS
function buttonStatus() {
var input = document.getElementById('addToListInput');
var submit= document.getElementById('addToListButton');
if (input.value.trim() ==""){
submit.disabled=true;
}else{
submit.disabled=false;
}
}

Use keyup instead. By using keydown you are detecting when the key is down, but the textbox value has not changed at that point...
<input id="addToListInput" onkeyup="buttonStatus()" value="" type="text">

onkeydown is fired before the input control is actually fired, if you use onkeyup it should work as you expect.