yaragallamurali Posted February 12, 2015 Share Posted February 12, 2015 I have a text field. i need to display some text by default. when user tries to types some text in the text field the default text should disappear and should allow the user to type in the text. This is same as "placeholder" in html 5. How can i achieve this in html4? Link to comment Share on other sites More sharing options...
tejasamrute Posted February 12, 2015 Share Posted February 12, 2015 (edited) <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script></head><body><form action="" method="post"> <input type="text" id="input" value="" /></form><script type="text/javascript"> $(document).ready(function(){ var Element = "#input"; var InputText = "Full Name..."; $(Element).val(InputText); $(Element).bind('focus',function(){ $(this).addClass('focus'); if($(this).val()==InputText){ $(this).val(''); } }).bind('blur',function(){ if($(this).val()==""){ $(this).val(InputText); $(this).removeClass('focus'); } }); }); </script></body> Edited February 12, 2015 by Tezzo Link to comment Share on other sites More sharing options...
yaragallamurali Posted February 12, 2015 Author Share Posted February 12, 2015 anything in pure javascript? without jquery. Link to comment Share on other sites More sharing options...
tejasamrute Posted February 12, 2015 Share Posted February 12, 2015 <script> window.onload = function () { /* Grab all elements with a placeholder attribute */ var element = document.querySelectorAll('[placeholder]'); /* Loop through each found elements */ for (var i in element) { /* If the element is a DOMElement and has the nodeName "INPUT" */ if (element[i].nodeType == 1 && element[i].nodeName == "INPUT") { /* We change the value of the element to its placeholder attr value */ element[i].value = element[i].getAttribute('placeholder'); /* We change its color to a light gray */ element[i].style.color = "#777"; /* When the input is selected/clicked on */ element[i].onfocus = function (event) { /* If the value within it is the placeholder, we clear it */ if (this.value == this.getAttribute('placeholder')) { this.value = ""; /* Setting default text color */ this.style.color = "#000"; }; }; /* We the input is left */ element[i].onblur = function (event) { /* If the field is empty, we set its value to the placeholder */ if (this.value == "") { this.value = this.getAttribute('placeholder'); this.style.color = "#777"; } }; } }}</script> Try this Link to comment Share on other sites More sharing options...
yaragallamurali Posted February 12, 2015 Author Share Posted February 12, 2015 Thank you so much. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2015 Share Posted February 12, 2015 Since placeholder is not supported in html4, as it is new in htlm5. You would use a default value for value attribute, then check if the user entered value is not blank and does not match the default value using .defaultValue before accepting the user input value. Link to comment Share on other sites More sharing options...
yaragallamurali Posted February 12, 2015 Author Share Posted February 12, 2015 Thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now