We Keep Coding

Initializing and setting events inside a jquery function

Can you please tell me how can I set the test function for the keyup element inside the test() function;
What would be only the function call in document ready, and all other events in the function itself.
jQuery.fn.extend({
test: function() {
$(this).val("123");
}
$(this).test();
$(this).keyup(function() {
$(this).test();
});
});
$(document).ready(function() {
$("input").test();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="456">

How to trigger a function when the typing cursor leaves the input text field?

I want to trigger a function when the typing cursor leaves the input text field. Does such an event exists? If someone knows please let me know, Thanks.
// to trigger this function
function trigger () {
console.log("no longer able to type in input text);
}

Just use onblur. You can do this in both vanilla js and jquery.
Vanilla Js:
function test() {
alert('Exited');
}
document.getElementById('waffle').addEventListener('blur', function(){
alert('exited waffle');
});
<input type="text" onblur="test()">
<input type="text" id="waffle">
With JQuery:
$('#test').on('blur', function(){
alert('exited');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test" type="text">
Jquery Ref: https://api.jquery.com/blur/
Vanilla: https://developer.mozilla.org/en-US/docs/Web/Events/blur

Yes, there is an event that you can bind a function to called "blur". It looks like this if you use addEventListener():
document.getElementById("myInput").addEventListener("blur", function() {
alert("focused out");
});
<input id="myInput"/>
Or if you have a named function, myFunction, you can register it on the DOM element via the input tag:
function myFunction() {
alert("focused out");
};
<input onblur="myFunction()"/>

Change function on Javascript/jQuery

I have a textfield, and I want the field to be disabled or read only if I change text on the field. But, before that, I can't make change function. I don't know why.
I have tried this code :
$("#submitOrder_cust_id_name").click(function () {
alert("Test");
});
and when I click the field it is working.
But, when I use this code
$("#submitOrder_cust_id_name").change(function () {alert("Test");});
or this code
$("#submitOrder_cust_id_name").on('change', function () {
alert("Test");
})
it doesn't work at all.
Please help. Thanks.

jquery change event trigger only when hit enter on the text box. If you want to trigger a event when you enter any character use "keypress" instead of "change"
Refer this :
https://www.w3schools.com/jquery/event_keypress.asp

use on 'change':
$('#submitOrder_cust_id_name').on('change', function () {
alert('test');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="submitOrder_cust_id_name" />

Try using .blur(). This will be called when the input field loses focus:
$('#submitOrder_cust_id_name').on('blur', function () {
alert('test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="submitOrder_cust_id_name" />

Auto-scaling issue: it is scaling with character's count

I want to change a input text size when I change its value.
I have this javascript:
jQuery(document).ready(function ($) {
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]')
// event handler
.keyup(resizeInput)
// resize on page load
.each(resizeInput);
document.getElementById("uploadBtn").onchange = function ()
{
document.getElementById("uploadFile").value = this.value;
$("#uploadFile").attr('size', $("#uploadFile").val().length);
};
});
First, I have test $('input[type="text"]') with resizeInput function. But it doesn't work.
Next, I have added that function to document.getElementById("uploadBtn").onchange = function () but it also doesn't work.
I want to resize input field uploadFile when I do this:
document.getElementById("uploadFile").value = this.value;
How can I auto-scale an input size when I assign it a new string? Now it is autoscaling but it changes input's size with string characters count, and this is not what do I want to do.
I have used this SO answer as inspiration.
I have added this JSFiddle but I'm getting an error.

Try this: change size value as per length of value entered.
$(function(){
$("input[type='text']").keyup(function(){
var value = $(this).val();
$(this).attr("size",value.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
Actually your code should work. You have define javascript function inside document.ready, just move it outside or make it jquery function.
jQuery(document).ready(function ($) {
$("input[type='text']").keyup(resizeInput);
});
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">

How to inherit Class in javascript?

The function is not working, It is not putting values in "input".
function example(id){
this.code= function(){$('.'+id).val(id)}
this.validate= function (){
$('.'+id).keyup(function (e){
if(e.keyCode==13) this.code();
})
}
}
body
<input type="text" class="test"/>
<input type="text" class="test1"/>
<script type="text/javascript">
var test= new example('test')
var test1= new example('test1')
test.validate()
test1.validate()
</script>

Your keyup event handler will have a different "this". You can use bind to correct the problem
keyup(function (e){
if(e.keyCode==13) this.code();
}.bind(this))
When you bind to an event, the handler is called with the "this" keyword set to the object that fired the event, not the object that created the event.

Well javascript is a bit hard to understand when it comes to this..
this article explains some of it http://www.crockford.com/javascript/inheritance.html
But one way to solve it would be
function example(id){
this.code= function(){$('.'+id).val(id)}
var self = this;
this.validate= function (){
$('.'+id).keyup(function (e){
if(e.keyCode==13) self.code();
});
}
}