Implement IE 10 textbox new features using jQuery

Home » Unlabelled » Implement IE 10 textbox new features using jQuery

Implement IE 10 textbox new features using jQuery

Posted by 20Fingers2Brains on Tags:

We are amazed with the new features provided by IE10.
When we type something inside the textbox, a cross image appears inside the textbox. On click of this image the the textbox is cleared.
Similarly typing inside input element of type password shows an eye image, on click of which the password appears.
These features are only provided by IE 10 browser.
We can achieve this using jQuery. In this tutorial we will see how to implement these features, not exactly the same but similar to them.

Cross image inside textbox

We have used keyup jquery event of textbox to track the character entered and appended the cross image inside the textbox.

The appended element is the span element. We have set its background image using css class.

On hovering the cross image, the textbox is cleared.

CSS class :

.crossImage
{
    background-image : url(./Images/crossImage.Png);
    background-repeat:no-repeat;
    display:inline-block;
    height:12px;
    width:11px;
    position:relative;
    left:-22px;
}

jQuery code :

 $(document).ready(function () {

        $("input[type='text']").keyup(function (e) {
            var textBoxEle = $(this);
            var controlID = textBoxEle.attr("id");
            var spanID = controlID + "spanEle";
            if (e.keyCode == 8) {
                if (textBoxEle.val() == "") {
                    $("#" + controlID + "spanEle").remove();
                }
            }
            else if ($("#" + controlID + "spanEle").length == 0) {
                $('<span class="crossImage"></span>').attr("id", spanID).insertAfter($(this)).hover(function () {
                    textBoxEle.val("");
                    $(this).remove();
                });
            }

        });

        //Code to remove cross image when focussing away from textbox
        $("input[type='text']").blur(function () {
            var controlID = $(this).attr("id");
            var spanID = controlID + "spanEle";
            $("#" + spanID).remove();
        });

        //Code to show cross image when focussing and textbox has content
        $("input[type='text']").focus(function () {
            debugger;
            var textBoxEle = $(this);
            var spanID = $(this).attr("id") +"spanEle";
            if ($(this).val() != "") {
                $('<span class="crossImage"></span>').attr("id", spanID).insertAfter($(this)).hover(function () {                                       
                    textBoxEle.val("");
                    $(this).remove();
                });
            }
        });
    });

Demo :

Thus we have used the hover event of image to blank the textbox. We can use click as well. Thus we have implemented the cross image code. This code is generic and wil work on all the textbox on the page. We need to provide id attribute of all the textbox for code to work properly.

Eye image inside textbox :

This is the default feature in IE 10. The browser renders the input type password in such way that when you type something inside it, it shows an eye image. On click of this image the password is shown.