Ребята, привет всем.
Начал работать с DOM, много непоняток. Мне нужно перерисовывать форму входа/регистрации, в зависимости от нужд пользователя.
HTML, описывающий форму:
| Код |
<script type="text/javascript" src="funcs.js"></script>
<div id="form"><h3>Login Form</h3>
<input id="login" class="input" name="login" type="text" size="20"> login *</br>
<input id="password" class="input" name="password" type="password" size="20"> password *</br>
<input id="email" class="input" name="email" type="text" size="20"> email *</br>
<input id="sendBtn" class="input" type="button" onclick="submitLoginForm()" value="Отправить"/>
</div>
<a href="#" onClick="drawLoginForm();">Login</a>
<a href="#" onClick="drawRegForm();">Registration</a>
|
Кусок Javascript, описывающий функциональность:
| Код |
function drawLoginForm() {
// меняем заголовок с Registration на Login
replaceText(document.getElementById("form").firstChild, "Login");
var emailInput = document.getElementById("email");
if (emailInput != null) { // ЕСЛИ есть поле email, удаляем это поле и его подпись
var emailInputCaption = emailInput.nextSibling;
if (emailInputCaption != null && emailInputCaption.nodeName == "#text") {
br = emailInputCaption.nextSibling;
if (br.nodeName == "BR")
document.getElementById("form").removeChild(br);
emailInputCaption.parentNode.removeChild(emailInputCaption);
}
emailInput.parentNode.removeChild(emailInput);
}
document.getElementById("login").focus();
}
function drawRegForm() {
// меняем заголовок с Login на Registration
replaceText(document.getElementById("form").firstChild, "Registration");
var emailInput = document.getElementById("email");
if (emailInput == null) { // ЕСЛИ нет поля email, добавляем его
var emailInput = document.createElement("input");
emailInput.type = "text";
emailInput.name = "email";
emailInput.id = "email";
emailInput.size = "20";
emailInput.class = "input";
}
document.getElementById("form").insertBefore(emailInput,
document.getElementById("sendBtn"));
document.getElementById("login").focus();
}
function replaceText(el, text) {
if (el != null) {
removeAllChilds(el);
var newNode = document.createTextNode(text);
el.appendChild(newNode);
}
}
|
Это работает в Firefox 3, но отказывается работать в IE 6 (похоже проблема в insertBefore). Поправьте, пожалуйста, ляпы. Посоветуйте что можно было сделать проще, что здесь не кроссбраузерно. Я не стал использовать innerHtml, т.к. в нескольких местах видел предостережения о его устарелости и то, что он не подерживается рядом браузеров (собственно, что и наблюдал в IE). |
)
Устаревшим является innerText.