| |
|
|
| | Доброго времени суток!
На многих сайтах в полях для ввода авторизационных данный вписано Логин и Пароль. При постановке курсора в одно из этих полей надпись стирается, а если ничего не ввеси и в это поле и убрать курсор то надпись снова появится. Каким образом это делается? | |
| |
|
|
| |
|
|
| |
для: nameivan
(01.04.2009 в 08:57)
| | |
<form>
...
<input name="pri"
value="Логин"
onclick="if (this.value == 'Логин') {this.value = ''; this.form.col.value = ''}"
onblur="if (!this.value) {this.value = 'Логин'; this.form.col.value = 'Пароль'}"><br>
<input name="col"
value="Пароль"
type="password"
onclick="if (this.value == 'Пароль') {this.value = ''; this.form.pri.value = ''}"
onblur="if (!this.value) {this.value = 'Пароль'; this.form.pri.value = 'Логин'}">
...
</form>
|
PS. Самое главное (выделено жирно) - чтобы поля назывались именно pri и col - иначе работать не будет. | |
| |
|
|
| |
|
|
| |
для: PAT
(01.04.2009 в 09:45)
| | | Можно добавить пару скрытых полей, с нужными именами, всё тип топ будет.
<form>
<input name="pri"
value="Логин"
onclick="if (this.value == 'Логин') {this.value = ''; this.form.col.value = ''}"
onblur="if (!this.value) {this.value = 'Логин'; this.form.col.value = 'Пароль';} document.getElementById('login').value=this.value;"><input name="login" type="hidden" id="login" value="" /><br>
<input name="col"
value="Пароль"
type="password"
onclick="if (this.value == 'Пароль') {this.value = ''; this.form.pri.value = ''}"
onblur="if (!this.value) {this.value = 'Пароль'; this.form.pri.value = 'Логин'} document.getElementById('pass').value=this.value;"><input name="pass" type="hidden" id="pass" value="" />
</form>
|
| |
| |
|
|
| |
|
|
| |
для: mikha
(01.04.2009 в 11:48)
| | | Можно, конечно.
Но, вы, полагаю, знаете, что в последнее время скрытые поля ведут себя в разных браузерах
по-разному и непредсказуемо - то скрываются, то показываются.
Поэтому, чтобы устойчиво работало, скрытые поля надо "окантовать" спанами с "невидимостью"
и с соответствующими ID. Вот так:
<form>
<input name="pri"
value="Логин"
onclick="if (this.value == 'Логин') {this.value = ''; this.form.col.value = ''}"
onblur="if (!this.value) {this.value = 'Логин'; this.form.col.value = 'Пароль';} document.getElementById('login').value=this.value;">
<span id="pri" style="display: none"><input name="login" type="hidden" id="login" value="" /></span><br>
<input name="col"
value="Пароль"
type="password"
onclick="if (this.value == 'Пароль') {this.value = ''; this.form.pri.value = ''}"
onblur="if (!this.value) {this.value = 'Пароль'; this.form.pri.value = 'Логин'} document.getElementById('pass').value=this.value;">
<span id="col" style="display: none"><input name="pass" type="hidden" id="pass" value="" /></span>
</form>
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(01.04.2009 в 12:09)
| | | Задвинуть их за пределы экрана, пусть показываются там.
<form>
<input name="pri"
value="Логин"
onclick="if (this.value == 'Логин') {this.value = ''; this.form.col.value = ''}"
onblur="if (!this.value) {this.value = 'Логин'; this.form.col.value = 'Пароль';} document.getElementById('login').value=this.value;">
<input name="login" type="hidden" id="login" value="" style="position: absolute; left: -5000px;" />
<br>
<input name="col"
value="Пароль"
type="password"
onclick="if (this.value == 'Пароль') {this.value = ''; this.form.pri.value = ''}"
onblur="if (!this.value) {this.value = 'Пароль'; this.form.pri.value = 'Логин'} document.getElementById('pass').value=this.value;">
<input name="pass" type="hidden" id="pass" value="" style="position: absolute; left: -5000px;" />
</form>
|
И это.. для IE по хорошему для них фон задать, 1px любой GIF прозрачный.. Что бы экран не дёргался, если будет глючить.
Автору топика. Если с фоном непонятно, скажешь, а то поленился сразу написать. | |
| |
|
|
