Javascript help..

Question

Hi, I am very new to javascript. I want to add the same effect as that given in the text fields of this webpage in my own page... Can any one help me with how to do it or where to learn it from.

I want my text fields to show what have to be written there but it will change as soon as I write something in it..

Another thing is that a small popup block will appear when I click on a textbox which describes what and how to write in it... like password should be alpha numeric... or more than 6 character long ect..

Thanks...

Answer 1

Look at jquery:

$('#textarea').onKeyup(
    function(){
        $('div#mydiv').innerHTML( $(this).val() );
    }
);

Thats a start. :)

Answer 2

If you want to do this in an accessible way (and you should):

If JS is available, position a transparent input over a label inside a container and toggle the transparency of the input based on its value at document load time and whenever the focus enters of leaves the element.

I've produced a minimal example.

As for the second part of the question. That's very similar. Just have another label beside the input, and toggle its visibility when the focus enters or leaves, ignoring the value of the input. I wouldn't bother with this though, advance notice of requirements is nice!

Answer 3

You might want to take a look at the WMD markdown editor:

http://wmd-editor.com/

This does exactly what you're looking for.

Answer 4

HTML Input field

<input type="text" name="name" id="name" value="" />

Javascript

function hint () {
  var elem = document.getElementById('name'); // get element

  elem.value = "Enter Name"; // fill element with value

  elem.onfocus = function () {   // if the user focuses 
    if (elem.value === "Enter Name") {  // if there is default text 
        elem.value = ""; // clear it
    }
  }

  elem.onblur = function () { // if user removes focus on field
    if (elem.value === "") {   // if the field is empty 
        elem.value= "Enter Name"; // fill in a default value
    }  
  } 
}

window.onload = hint;  // call the function when the page has loaded