Как это сделать через сам тег изменить тип текста с паролем
<input type='text' name='pass' />
Можно ли вставить JS внутри самого тега ввода, чтобы изменить type = 'text' на type = 'password'?
Как это сделать через сам тег изменить тип текста с паролем
<input type='text' name='pass' />
Можно ли вставить JS внутри самого тега ввода, чтобы изменить type = 'text' на type = 'password'?
Try:
<input id="hybrid" type="text" name="password" />
<script type="text/javascript">
document.getElementById('hybrid').type = 'password';
</script>
Изменение type
в <input type=password>
вызывает ошибку безопасности в некоторых браузерах (старые версии IE и Firefox).
Вам нужно создать новый элемент input
, установить его type
на тот, который вы хотите, и клонировать все другие свойства из существующего.
Я делаю это в моем плагине-заполнителе jQuery: https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L80-84
Работа в Internet Explorer:
Функция ниже выполняет указанные выше задачи:
<script>
function changeInputType(oldObject, oType) {
var newObject = document.createElement('input');
newObject.type = oType;
if(oldObject.size) newObject.size = oldObject.size;
if(oldObject.value) newObject.value = oldObject.value;
if(oldObject.name) newObject.name = oldObject.name;
if(oldObject.id) newObject.id = oldObject.id;
if(oldObject.className) newObject.className = oldObject.className;
oldObject.parentNode.replaceChild(newObject,oldObject);
return newObject;
}
</script>
Вот что я имею для себя.
По сути, вы используете команды onfocus и onblur в теге для запуска соответствующего javascript. Это может быть просто:
<span><input name="login_text_password" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="this.select(); this.setAttribute('type','text');" /></span>
Развитая версия этой базовой функции проверяет и пустую строку и возвращает пароль в исходный пароль "Пароль" в случае нулевого текстового поля:
<script type="text/javascript">
function password_set_attribute() {
if (document.getElementsByName("login_text_password")[0].value.replace(/\s+/g, ' ') == "" || document.getElementsByName[0].value == null) {
document.getElementsByName("login_text_password")[0].setAttribute('type','text')
document.getElementsByName("login_text_password")[0].value = 'Password';
}
else {
document.getElementsByName("login_text_password")[0].setAttribute('type','password')
}
}
</script>
Где выглядит HTML:
<span><input name="login_text_password" class="roundCorners" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="password_set_attribute();" /></span>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function changefield(){
document.getElementById("passwordbox").innerHTML = "<input id=\"passwordfield\" type=\"password\" name=\"password-field\" title=\"Password\" tabindex=\"2\" />";
document.getElementById("password-field".focus();
}
</script>
</head>
<body>
<div id="passwordbox">
<input id="password-field" type="text" name="password-field" title="Password"onfocus="changefield();" value="Password" tabindex="2" />
</div>
<input type="submit" name="submit" value="sign in" tabindex="3" />
</body>
</html>
Это не поддерживается некоторыми браузерами (IE, если я помню), но он работает в остальном:
document.getElementById("password-field").attributes["type"] = "password";
или
document.getElementById("password-field").attributes["type"] = "text";
Мне пришлось добавить ".value" в конец Evert-кода, чтобы заставить его работать.
Кроме того, я объединил его с проверкой браузера, чтобы поле ввода type = "number" было изменено на type = "text" в Chrome, так как сейчас "formnovalidate" не работает.
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
document.getElementById("input_id").attributes["type"].value = "text";