Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Pre filled text input

From marketing point of view, visitor is more likely to submit information to form if he or she is any way encouraged to do that. One way to encourage visitor is to prefill input with encouraging text.

Most common mistake to do that is to use predefined text value in input and delete it on focus event. It's a mistake because, for example someone might automatically submit form without invoking focus. Yes it is possible to create onsubmit event etc, but why bother if there is much easier way?

The best practise is to use image and change it on focus and blur, like shown in this script:
 
<html>
<head>
<style>
#example
{
    width: 231px;
    height: 33px;
    line-height: 33px;
    border: 0;
    background-color: transparent;
    background-image: url("./pre_input.png");
    background-position: 0 0;
    padding-left: 5px;
    padding-right: 5px;
    font-family: Arial, serif;
    font-size: 15px;
    color: grey;
}
</style>
</head>
<body>
<p><input type='text' id='example'/></p>
<script>
//simple add event function
var add_event = function(element, type, listener){
    if(element.addEventListener)
    {
        element.addEventListener(type, listener, false);
    }
    else
    {
        element.attachEvent('on' +  type, listener);
    }
};

//get needed input
var elem = document.getElementById("example");

//change to empy image on focus
add_event(elem, "focus", function(){
    elem.style.backgroundPosition = "0 33px";
});

//if value is empty change to text image on blur
add_event(elem, "blur", function(){
    if(elem.value == "")
    {
        elem.style.backgroundPosition = "0 0";
    }
});
</script>
</body>
</html>
And here is a working example:
 


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus