2011-02-04 4 views
2

У меня есть текстовое поле, в котором уже есть часть текста, чтобы пользователи знали, что должно быть в нем. Я уже настроил его, поэтому нажатие на него выбирает весь текст. Что я хочу знать, как я могу это сделать, поэтому щелчок по текстовому полю очистит весь текст. Аналогично, если пользователь удаляет все, что они написали, как я могу сделать исходный текст?Автоматическая замена текста в текстовом поле HTML

Прекрасным примером того, что я хочу сделать, является текстовое поле для заголовка, задавая вопрос здесь о переполнении стека.

ответ

3

С помощью приведенного ниже кода вы можете просто добавить класс «очистить» к любому элементу ввода или текстовому полю, и он очистит начальное значение !!!

<!DOCTYPE html>  
<html> 
    <head> 
    <title>Sample</title> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script> 
    <script> 
    $(function() { 
     $('.clear').one('focus', function() { 
     this.value = ''; 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <input type="text" value="Full Name" class="clear"/> <br /> 
    <input type="text" value="Email" class="clear"/> <br /> 
    <textarea value="About you..." class="clear"></textarea> 
    </body> 
    </html> 
+1

Я новичок в этом, вы не могли бы объяснить? Большое спасибо! – Teknophilia

+0

Несомненно, вы используете библиотеку Javascript, такую ​​как JQuery? Это сделало бы такие задачи намного эффективнее и проще. Если вам нравится, я изменю ответ, чтобы выполнить полное решение, используя JQuery – Paul

+0

@Teknophilia - эта работа для вас? – Paul

0

В созданной вами текстовой области должен быть идентификатор, связанный с ним в теге. Идентификатор области текста будет выглядеть примерно так:

<textarea id="someId"...> 

Где «someId» будет любым именем, которое вы ему дадите. Затем, когда вы используете следующий код:

document.getElementById('someId').value = ''; 

он заменит текст в поле текстом, указанным выше. В этом случае он заменит его текстом. Просто убедитесь, что он делает это только один раз, иначе, когда вы выходите за пределы поля, а затем снова щелкните внутри него, вход пользователя все равно будет удалён.

1

Быстрые и грязный, но делает работу:

<input type="text" value="init..." onfocus="this.value=''; this.onfocus=null;" /> 

Надеется, что это помогает!

Смежные вопросы