www.webdeveloper.com
Results 1 to 4 of 4

Thread: New to javascript need serious event handler help.

  1. #1
    Join Date
    May 2003
    Location
    Florida
    Posts
    38

    New to javascript need serious event handler help.

    Okay guys, please help me deal with my ignorance. I'm trying to do something that so ridiculously common on the internet but I've spent all my time learning PHP and dont know hardly any javascript. I'm trying to create the affect of having text automatically appear in a form field and then have the text disappear as soon as a user focuses on it.

    I'm going to be using this technique on lots of different form fields and the text that would appear would say different things so I decided to create functions that accept a parameter.

    I did one function for "onfocus" which would make the text disappear and another on for "onblur" and then in the HTML I have the value equal to the text that would disapper then reappear and the parameter being passed to each function is idental to the value of the form field. Here's the code I have in my extermal js file.

    Code:
    function fieldnoshow(words) {
    	if(this.value == '" + words + "'){this.value = '';}
    	
    }
       	
    function fieldshow(words) {
    	if(this.value == '') {this.value = '" + words + "';
    	
    }
    I also tried returning the values but that didn't work either. Can someone help me out?...Please?

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Input fields have a defaultValue property. I'm sure you can work out the rest.

  3. #3
    Join Date
    Dec 2012
    Posts
    167
    Modern browsers support a placeholder attribute on input fields which does this for you.

    HTML Code:
    <input type="text" placeholder="Enter your name" name="name" id="name"/>
    You could also add some JavaScript to support browsers that don't support the placeholder attribute

    Code:
    var input = document.createElement('input');
    if(!("placeholder" in input)) {
    var inputs = document.getElementsByTagName('input');
    for(var i = 0, l = inputs.length; i < l; i++) {
    if(inputs[i].getAttribute('placeholder')) {
    inputs[i].value = inputs[i].getAttribute('placeholder');
    inputs[i].addEventListener ? inputs[i].addEventListener('blur',blur) : inputs[i].attachEvent('onblur',blur);
    inputs[i].addEventListener ? inputs[i].addEventListener('focus',focus) : inputs[i].attachEvent('onfocus',focus);
    }
    }
    
    function blur(e) {
    var target = e.srcElement ? e.srcElement : e.target;
    if(target.value == "") {
    target.value = target.getAttribute('placeholder');
    }
    }
    function focus(e) {
    var target = e.srcElement ? e.srcElement : e.target;
    if(target.value == target.getAttribute('placeholder')) {
    target.value = "";
    }
    }
    }
    Last edited by iBeZi; 12-16-2012 at 12:57 PM.

  4. #4
    Join Date
    May 2003
    Location
    Florida
    Posts
    38

    resolved Thank you!!

    Thank you so much! I can't believe I didn't know that! I have been designing websites for years and I didn't know something so basic. I had no idea there was a placeholder attribute and it even works in internet explorer 8. It actually makes the text a light gray and it disappears as soon as I start typing. Thank you so much for the javascript code. It definitely looks complicated and goes to show that javascript is alot more difficult than PHP. Even though this placeholder is doing the job I'm still going to try to implement the javascript code as well for folks with old dinasour computers.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles