Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there an onload event for input elements?

Tags:

javascript

Is it possible to trigger a Javascript script, when an input element or any other html element is rendered. This script should be triggered from within the html tag, so that we should be able to pass 'this' to the js function.

like image 595
imdahmd Avatar asked Sep 14 '10 12:09

imdahmd


People also ask

Can we use onload for input?

onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below).

Which HTML elements support onload?

onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below).

Is onload an event or an event handler?

The onload function works as an event handler for all the objects that are to be loaded on a web page. This window. onload proper is a default part of the browser. The onload function is responsible for loading the entire web page, all its scripts, and components.

How do you trigger onload?

Yeah, you can use a click event called onLoad() . Just use the setTimeout() method in jquery. It will call a click function without clicking it.


2 Answers

No, there is no such event.

However, a <script> tag placed directly after the HTML element would have a similar effect: It would be executed directly after the element has been rendered:

<input type="text" id="input123" value="Hello World!">  <script> alert("Input123 is now ready:"+document.getElementById("input123").value); </script> 

In most cases, however, it is best to use the document-wide load (or DOMReady, or jQuery's .ready()) to start any script operations. The DOM will be fully ready then.

like image 125
Pekka Avatar answered Sep 24 '22 03:09

Pekka


A way to simulate such an event is to create a custom data-* atttribute (HTML-5 valid) and use that as a selector. Then in the main javascript code, you can add a selector for anything which has this specific data-XXX attribute and evaluate the javascript code inside.

Example HTML code:

<div data-onload="sampleFunction('param1', 2)"></div> 

Example Javascript code (using jQuery). It is also possible to use normal DOM to find elements with this attribute.

/* Find any element which has a 'data-onload' function and load that to simulate an onload. */ $('[data-onload]').each(function(){     eval($(this).data('onload')); }); 

This works well. I actually use it in production.

like image 38
ChrisR Avatar answered Sep 26 '22 03:09

ChrisR