Skip to content

JQuery focus and blur Examples

Example 1

example 1
<body>

    <input type="text" id="txt">

<script>

    $(document).ready(function(){
        $("#txt").focus(function(){
            $(this).css("border-radius","60px");
            $("body").css("background","#F65938")
        })
        $("#txt").blur(function(){
            $(this).css("border-radius","0px");
            $("body").css("background","white")
        })
    })

</script>
</body>
body{
    transition: 1s;
}
input{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 1s;
    outline: none;
    border: 3px solid #ccc;
    text-indent: 12px;
    padding: 5px;
}

JavaScript

Example 2

example 2
<style>
        body{
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
        }
        input {
            display: block;
            color: #e53f3f;
            border: 2px solid #262626;
            border-radius: 20px;
            padding: 5px;
            padding-left: 10px;
            outline: none;
            font-family: Verdana;
            font-weight: bold;
            box-shadow: 0px 10px 20px #262626;
        }
    </style>
<body>

    <input type="text" id="name" onblur="Uname();" placeholder="onblur"/>
        
    <script>

        function Uname() {
            let name = document.getElementById("name");
            name.value = name.value.toUpperCase();
        }



    </script>
</body>

Example 3

<body>

    <div id="container">
        <input type="text" id="box1" onblur="repeat();" placeholder="repeat" />
        <input type="text" id="box2" onblur="charCodeAt();" placeholder="charCodeAt" />
    </div>

        
    <script>

        function repeat() {
            let box1 = document.getElementById("box1");
            box1.value = box1.value.repeat();
        }

        function charCodeAt() {
            let box2 = document.getElementById("box2");
            box2.value = box2.value.charCodeAt();
        }

    </script>
</body>

Example 4

example 4
<body>


        <input type="password" id="pWord" placeholder="password" />
  
        
    <script>
        
        document.querySelector("#pWord").addEventListener("blur", blurFunction);

        function blurFunction() {
            alert("Make sure you entered the password correctly");
        }



    </script>
</body>

Example 5

example 5
<body>


    <input id="textLog" name="txt" type="text" onblur="login();">

    <span id="result"> </span>


    <script>

        function login() {
            var obj = document.getElementById('result');
            var txt = document.getElementById('textLog');

            if (isNaN(txt.value))
                obj.innerHTML = "You entered text!";
            else
                obj.innerHTML = "You entered number!";
        }



    </script>
</body>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: