26.10.2014, 01:05
|
|
Новичок на форуме
|
|
Регистрация: 26.10.2014
Сообщений: 4
|
|
Сообщение от bes
|
для понта  (шутка)
решение со сменой type всё же логичнее и проще и не подходит только для IE<9, поэтому основывать решение изначально на костыле имхо не гуд, потом только удалить кусок костыльного кода
|
Здравствуйте. А смотрите я хочу что бы место пароля у меня так же и остались *** но рядом была кнопка типо глазика при нажатии которой показывался бы пароль. Как это осуществить? помогите пожалуйста) |
|
26.10.2014, 04:28
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Если поддержка 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>
__________________
В личку только с интересными предложениями 
Последний раз редактировалось danik.js, 26.10.2014 в 04:39.
|
|
26.10.2014, 09:31
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от Leanidas
|
|
Здравствуйте. А смотрите я хочу что бы место пароля у меня так же и остались *** но рядом была кнопка типо глазика при нажатии которой показывался бы пароль. Как это осуществить? помогите пожалуйста)
|
проблема в том, чтобы приделать глаз вместо кнопки что ли? 
<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>
|
|
26.10.2014, 11:55
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
bes, а почему атрибуты вместо свойств?
Кстати, заметил, что map выглядит выразительней, чем тернарный оператор:
input.type = {text: 'password', password: 'text'}[input.type];
input.type = input.type == 'text' ? 'password' : 'text';
Или мне одному так кажется?
__________________
В личку только с интересными предложениями
|
|
26.10.2014, 12:38
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
|
|
26.10.2014, 12:56
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от danik.js
|
|
bes, а почему атрибуты вместо свойств?
|
вероятно пережитки прошлого
ещё более вероятно, что отстал в развитии, так как не понял на основе чего ты это провернул
|
Сообщение от danik.js
|
|
input.type = {text: 'password', password: 'text'}[input.type];
|
|
|
26.10.2014, 13:17
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Ну в IE8 этот код в любом случае не работает ) Ну а насчет Chrome надеюсь ошиблись. Иначе это печально.
|
Сообщение от bes
|
|
что отстал в развитии
|
Боюсь это деградация ) Это же ассоциативный массив, тут же получаем свойство по ключу.
Или в чем проблема? Кажется способ не очень выразительный )
__________________
В личку только с интересными предложениями
|
|
26.10.2014, 13:17
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от bes
|
|
ещё более вероятно, что отстал в развитии, так как не понял на основе чего ты это провернул
|
сорри, здесь просто тупанул, всё понятно |
|
26.10.2014, 13:24
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от danik.js
|
Боюсь это деградация ) Это же ассоциативный массив, тут же получаем свойство по ключу.
Или в чем проблема? Кажется способ не очень выразительный )
|
lf-lf да-да, это деградация
причём сбил с толку
|
Сообщение от danik.js
|
|
что map
|
и начал искать особый смысл  |
|
26.10.2014, 14:00
|
|
Новичок на форуме
|
|
Регистрация: 26.10.2014
Сообщений: 4
|
|
|
Сообщение от bes
|
проблема в том, чтобы приделать глаз вместо кнопки что ли?
<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>
|
Блин наверно глупые вопросы)) а каких файлах это писать и где что Что бы вот тут где у меня регистрация рядом с полем пароль появился глаз или кнопочка при нажатии которой просматривать пароль. http://mb.msk0.ru/index.php?route=ac...simpleregister |
|
|
|
