Цитата:
|
Если поддержка IE8 не нужна, то:
<!DOCTYPE html>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
input{
vertical-align: middle;
font-family: "Lucida Console", Monaco, monospace;
}
input::-ms-reveal,
input::-ms-clear
{
display: none;
}
.password-reveal{
border: none;
padding: 0;
width: 1.3em;
height: 1.2em;
margin-left: -1.9em;
vertical-align: middle;
background: none;
color: #555;
cursor: default;
}
.password-reveal:hover{
color: #222;
}
</style>
<span class="input-wrap">
<input type="password" value="password" />
<button tabindex="-1" aria-hidden="true" class="password-reveal" type="button"><span class="fa fa-eye"></span></button>
</span>
<script>
(function() {
var eye = document.querySelector('.password-reveal');
eye.onmousedown = function() {
return false;
};
eye.onclick = function() {
var input = this.previousElementSibling;
var selection = {start: input.selectionStart, end: input.selectionEnd};
input.type = {text: 'password', password: 'text'}[input.type];
input.selectionEnd = selection.end;
input.selectionStart = selection.start;
return false;
};
})();
</script>
|
Цитата:
<style>
img {
position: relative;
width: 1em;
height: 1em;
top: 0.2em;
left: -1.5em;
z-index: 100;
}
</style>
<input type="password" value="something wrong">
<img src="http://www.wordassociations.ru/image/600x/svg_to_png/Anonymous_eye.png">
<script>
(function () {
var input = document.querySelector("input");
document.querySelector("img").addEventListener("click", function () {
if (input.getAttribute('type') != 'text') {
input.setAttribute('type', 'text');
} else {
input.setAttribute('type', 'password');
}
});
})();
</script>
|
bes, а почему атрибуты вместо свойств?
Кстати, заметил, что map выглядит выразительней, чем тернарный оператор:
input.type = {text: 'password', password: 'text'}[input.type];
input.type = input.type == 'text' ? 'password' : 'text'; Или мне одному так кажется? |
danik.js,
мысли вслух ... input.type = input.type != 'text' ? 'text':'password' ; с "неравно" конструкция надёжнее и сработает например при смене стиля display по умолчанию или придётся добавить ещё '' : 'none' и вариант использования )))
<style>
span {
cursor: pointer;
}
</style>
<span class="test"></span>
<script>
(function() {
function wordReplace(elem, first, last) {
var word = {};
word[first] = last;
word[last] = first;
elem.innerHTML = first;
elem.onclick = function() {
elem.innerHTML = word[elem.innerHTML]
}
}
var test = document.querySelector('.test');
wordReplace(test, 'первый', 'второй')
})();
</script>
|
Цитата:
ещё более вероятно, что отстал в развитии, так как не понял на основе чего ты это провернул Цитата:
|
Ну в IE8 этот код в любом случае не работает ) Ну а насчет Chrome надеюсь ошиблись. Иначе это печально.
Цитата:
Или в чем проблема? Кажется способ не очень выразительный ) |
Цитата:
|
Цитата:
причём сбил с толку Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 18:50. |