textarea - Help converting jquery code to normal / plain javascript -


The purpose of converting it so that I can learn how it can be done without jquery.

  & lt; Html & gt; & Lt; Top & gt; & Lt; Script type = "text / javascript" src = "http://code.jquery.com/jquery-1.4.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {// Focus Auto Focus Fields $ ('. Auto-focus: first') Focus (); // Auto-Hint Fields $ ('INPUT.auto-hint, Focus Function () () (if ($ (this) .val () == $ (this) .attr ('title')) {$ (this) .val (''); $ (this) .removeClass (' Auto-hint ');}}) $ (' INPUT.auto- sign, texta.auto-gesture '). Blur (function () {if ($ (this) .val () =' '& Amp; $ (This) .attr ('title')! = '') {$ (This) .Val ($ (this) .attr ('title')); $ (this) .addClass ('auto-hint'); }}; $ ('INPUT.auto- sign, texta.auto-gesture'). (Function () {if ($ (this) .attr ('title') == '') {return;} if ($ (This) .val () == '') {$ (this) .val ($ (this) .attr ('title')); and {$ (this) .removeClass ('Auto -Signet ');}})}}; & lt; / script & gt; & lt; / head> gt; body & gt; & lt; form & gt; email: & lt; input type = "Text" name = "email" id = "email" title = "ie me@example.com" class = "auto-indication" />  gt; & lt; / body & gt;   

I found this code here:

Here you can go:

  (function () {var clss = 'auto-hint', fields = document.getElementsByClassName (clss), field; (Var i = 0; i & lt; fields.length; i ++) for {field = fields [i]; Field.value = field.title; Field.onfocus = function () (if (this.value === this.title) {this.value = ''; this.className = '';}}; field. Onblur = function () {if (this. Value === '') {this.value = this.title; this.className = clss;}}}}}) ();   

Live demo:


Introducing placeholder attribute in BTW, HTML5 it's okay The same work is done. However, it does not work in IE (but it works in Firefox, Chrome, Safari and Opera).

  & lt; Input type = "text" placeholder = "name" & gt;   

Live demo:

Comments