How to clear input and textarea forms

What is the essence: when focusing on the form, it is necessary to clean it; if the user has not entered anything, then return the original value. I coped with it.

Another problem appeared: if the user entered something, then dropped the focus, then returned to the form, the "value" attribute becomes empty, and so always. The code that answered for this:

$(function(){ $.fn.clearForm = function(){ $(this).each(function(){ $(this).data("defValue", $(this).attr("value"));//Запомнить изначальное значение }) .bind("focus", function(){ if($(this).attr("value") == $(this).data("defValue"))//Если стоит оно $(this).attr("value", "").css("color", "black");//Очистить форму и выставить чёрный цвет }) .bind("blur", function(){ if($(this).attr("value") == "")//Если ничего не ввели $(this).attr("value", $(this).data("defValue")).css("color", "grey");//Восстановить изначальное значение }); return $(this); }; }); 

I connected it like this:

 $(function(){$(".clearForm").clearForm();}); 

HTML:

 <form name = "comment"> <textarea>Type your comment</textarea> <br/> <br/> <input name="comment" class ="clearForm" type = "text" value = "Type your nickname..."><span class="sending">Send</span> </form> 

In the style sheet, only color:grey and element position are indicated.

After that, I tried to fix this code. Almost got it. But, as you guessed, the problems remained, specifically: if the user enters something, then he presses "Backspace", the character is deleted visually, but it still falls into the "value". And the same problem remained, the user entered, changed the focus from the form, focused on the form, did not enter anything, the value of the attribute "value" is reset, the text becomes gray. HTML did not change, here is the jQuery code (connected in the same way):

  $(function(){ $.fn.clearForm = function(){ var value = "";//Получает то, что пользователь ввёл var tmp = "";//Используется для повторном вводе, когда есть какое-то значение $(this).each(function(){ $(this).data("defValue", $(this).attr("value"));//Запомнить начальное значение }) .bind("focus", function(){ if($(this).attr("value") == $(this).data("defValue")){//Если сходиться $(this).attr("value", "").css("color", "black");//Подготовить форму к написанию текста } }) .bind("keypress", function(eventObject){ value += getChar(eventObject);//Получаем символы с клавиатуры }) .bind("blur", function(){ if(($(this).attr("value") == "") && (value == "")){//Если ничего не введено, а поле сброшено $(this).attr("value", $(this).data("defValue")).css("color", "grey");//Возвращаемся на исходную }else if((value != "") && ($(this).attr("value") == "")){//Если что-то ввели, а поле пустое, тоесть первый ввод текста $(this).attr("value", value); }else if((value != "") && ($(this).attr("value") != "")){//Если что-то ввели и поле не пустое tmp += $(this).attr("value");//Заносим старое значение в tmp tmp += value;//добавляем введённое значение value = tmp;//присваем основной переменной полное значение tmp = "";//Обнуляем tmp $(this).attr("value", value); }else if(value == ""){//Мусорная функция, добавил для того, что бы сбрасывать поле ввода $(this).attr("value", "");//По задумке, это должно как-то очищать поле ввода, если пользователь жмёт Backspace или выделяет, а потом удаляет текст } value = "";//обнуляем /*test func*//*ch($(this).attr("value"), 1);*///Этим тестировал //Подключал тем же способом }); return $(this); }; });