Ответ на вопрос, который вы фактически задали, заключается в том, что вы можете сделать это, встроив данные в замыкание, а затем использовать замыкание в качестве своего обработчика:
document.getElementById("searchfield").onclick = buildHandler(removeTextWhenClicked, 1);
document.getElementById("searchfield2").onclick = buildHandler(removeTextWhenClicked, 2);
... где buildHandler выглядит так:
function buildHandler(callback, arg) {
return function() {
return callback(arg);
};
}
Подробнее о замыканиях здесь , это очень мощный и полезный инструмент в JavaScript.
Однако в вашем конкретном случае вам не нужно этого делать, потому что единственная информация, которую вы передавали в функцию, была средством определения того, с каким элементом вы имеете дело, и у вас это уже есть: this. В обработчике событий this будет указывать на элемент, для которого вы устанавливаете обработчик. Так, например, removeTextWhenClicked может быть:
function removeTextWhenClicked()
{
this.value = "";
}
... и, поскольку вам не нужно было привязывать к этому какие-либо данные, вы все равно можете использовать их напрямую, как и изначально.
Ваши обработчики blur отличаются друг от друга, поэтому вам может потребоваться привязать к ним данные. Кроме того, вы можете сделать все это на основе разметки:
<input id="searchfield" name="searchfield" type="text" data-msg="please enter username" value="Your e-mail address" />
<br />
<input id="searchfield2" name="searchfield2" type="text" data-msg="please enter password" value="Your password" />
Обратите внимание на новые атрибуты data-img. Теперь ваш removeTextWhenBlur становится:
function removeTextWhenBlur()
{
if (this.value == "")
{
this.value = this.getAttribute("data-msg");
}
else
{
this.style.color = "#333333";
}
}
Настраиваемые атрибуты, такие как data-msg, являются недействительными в HTML4 и более ранних версиях (хотя я никогда не видел браузер, который их запрещал), поэтому разметка не будет проверяться с помощью инструментов проверки . Начиная с HTML5, пользовательские атрибуты, начинающиеся с data-, являются действительными. Таким образом, вы можете пойти дальше и использовать их сейчас, если вы не используете валидацию как часть процесса разработки [валидация - это хорошо (tm)] или если вы используете тип документа HTML5.
Теперь, атрибуты могут быть вам не подходящими. Они могут быть очень полезны в больших командах, где люди, делающие разметку, отличаются от людей, делающих код, и поэтому важно сохранять четкое разделение вещей. Другой подход, однако, будет отображать сообщения на элементы по их идентификатору. Используя исходную разметку, эти функции могут работать следующим образом:
var placeholders = {
"searchfield": "please enter username",
"searchfield2": "please enter password"
};
function removeTextWhenClicked()
{
this.value = "";
}
function removeTextWhenBlur()
{
if (this.value == "")
{
this.value = placeholders[this.id];
}
else
{
this.style.color = "#333333";
}
}
Не по теме # 1 :
Я бы, наверное, изменил removeTextWhenClicked на:
function removeTextWhenClicked()
{
if (this.value == placeholders[this.id])
{
this.value = "";
}
this.style.color = ''; // In case we colored it earlier
}
Не по теме # 2 :
Стоит использовать библиотеку JavaScript, такую как jQuery , Прототип , YUI , Закрытие или любой из нескольких другие . Они сглаживают различия между реализациями браузера, предоставляют полезные служебные функции и, как правило, экономят вам больше времени, чем они потребляют.
Не по теме # 3 :
Используемый вами метод присвоения обработчика, присваивания свойству onclick и так далее, называется методом "DOM0". Это довольно старомодно и ограничительно. Стоит взглянуть на более новый «DOM2» способ сделать это, который addEventListener, хотя к сожалению это attachEvent в IE. (Любая библиотека JavaScript предоставит оболочку для решения этой проблемы.) Одним из преимуществ обработчиков DOM2 является то, что для одного и того же события в одном и том же элементе может быть установлено более одного обработчика, тогда как с помощью механизма DOM0 назначается новый обработчик дубинок (удаляется ) любой предыдущий.