AUTO FOCUS INPUT FIELD ON RELOAD

-

 AUTO FOCUS ON RELOAD



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
     content="IE=edge">
    <meta name="viewport"
     content="width=device-width, 
    initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="input">

    <script>
        window.onload = function(){
            document.getElementById("input").focus();
        }

    </script>
</body>
</html>

focus()

The focus() method is used to focus an element 

note: use blur() to remove focus from an element 


syntax :: document.getElementById("id").focus()

and it has no parameters


we can add function also when an html object is focused 

<!DOCTYPE html>

<html>

<body>

<p>This example shows how the HTML DOM  is used  to assign an "onfocus" event to an input element.</p>

Enter your name: <input type="text" id="fname">

<script>

document.getElementById("fname").onfocus = function myFunction(){  document.getElementById("fname").style.backgroundColor = "red";};

</script>

</body>

</html>

we can also achieve this method using autofocus="on" as an attribute in input tag , this is purely html but what i showed in video is ahieved using javascript DOM


this function is used to give user a nice experience while using our app

the user is not strained to click on the input field and feels good to handle it


onfocus is supported on chrome and edge and mozilla and safari and even opera also,

there are many dom events some of them are 

focus

focusin

focusout

input

invalid

keydown

keypress

keyup

error

ended

duration change

drop

dragstart

dragover

drag leave

dragenter

dragend

drag

dblclick

cut

copy

paste

mouseenter

mouseleave

mousemove

mouseout

mouseup

offline

online

open

pagehide

pageshow

pause

play

playing

progress

ratechange

resize

reset

scroll'

search

seeked

seeking

select

show

stalled

submit

suspend

timeupdate

toggle

touchcancel

touchend

touchmove

touchstart

unload

volumechange

waiting

wheel

altkey

animationname

bubbles

button

cancelable

charcode

clientX

clientY

code

createevent

ctrlkey

defaultprevented

deltax

deltay

and manymore like this.......


please subscribe my youtube channel

@kssvinay


please go through my blog carefully you will find a random housie ticket and coin generator

housie ticket and number generator

thanks for visiting

Comments

Post a Comment

Popular posts from this blog