The article on Habré http://habrahabr.ru/post/260929/ in paragraph 5 (about animation) shows an example of a placeholder animation. The fields themselves are filled with information, showing the user what to do with the form. An interesting thing, I want to do as well. Google all day, did not find anything sensible. Tell me, please, can anyone do this?

  • I do not understand why? It seems the user saw that the form itself is filled will just wait. Not quite clear the course of your thoughts. Use jQuery and add a value per second to the placeholder attribute of the specified inputa. The values ​​themselves should be stored in a certain array, after when all values ​​are filled in the first input, go to the next one, etc. When all inputs have been filled, clear them and start from the beginning. Just seemingly try, there will be a code - we will help. - Makarenko_I_V
  • There, the filling of the form on the video was recorded, not the placeholder. - Qwertiy ♦

2 answers 2

Solution on jQuery (not tested, but I think the point is clear):

i = 0; default = [['name', ['I', 'v', 'a', 'n']], ...]; // i - индекс элемента который меняем function anim(i){ if(i < default.length) { var text = $('input#'+default[i][0]).attr("placeholder"); if (default[i][1].length == text.length){ i++; anim(i); } else { text += default[i][1][text.length]; $('input#'+default[i][0]).attr("placeholder", text); } } else { // очищаем все placeholder-ы i = 0; for(j=0; j<default.length; j++){ $('input#'+default[i][0]).attr("placeholder", ""); } } } // запускаем метод каждую секунду var timerId = setInterval( anim(i), 1000); // что бы выключить clearInterval(timerId); 
     input {background: url(image.gif)} анимированная картинка input:focus {background: none;} убираем ее при вводе или заменяем на другую
    • I believe that images, especially in large projects, should be avoided or their number should be minimized. So the option on pure js, suggested above in the commentary or lower in the answer, will be many times better than the heap of pictures, if there are many fields in the form, in particular , the Quality Generator
    • @GeneratorQuality, if you need only text - yes, but this does not work when js-e is disabled (which happens quite often) and will not be relevant when using the pictures that you have in the example you gave. - Neka
    • You need to check for js activity and, if it is turned off, use your method. So it will be wiser - GeneratorQuality