В WebKit и Firefox текст в input
placeholder
хранится на focus
-it не исчезает до тех пор, пока input.val
не будет иметь что-то в нем.
Есть ли хороший способ заставить IE10 сделать то же самое?
В WebKit и Firefox текст в input
placeholder
хранится на focus
-it не исчезает до тех пор, пока input.val
не будет иметь что-то в нем.
Есть ли хороший способ заставить IE10 сделать то же самое?
Документация по : -ms-input-placeholder псевдокласс из Центра разработчиков Internet Explorer, похоже, подразумевает, что это работает как задумано.
Текст заполнителя отображается с указанным стилем до поле имеет фокус, это означает, что поле может быть набрано. Когда поле имеет фокус, оно возвращается к нормальному стилю поля ввода и текст заполнителя исчезает.
Изменить: Если бы мне пришлось подражать этому поведению, я бы посмотрел библиотеки заполнителя заполнителя (которые устанавливают значение по умолчанию, плавающий серый текст над полем ввода и т.д.), Которые работают с более старыми версиями IE. Их нужно будет изменить, потому что они, вероятно, позволяют обнаруживать возможности заполнителя и переносить их в браузер. Кроме того, это может иметь запах браузера, обнаруживающий код.
Обновление: "Текст заполнителя IE исчезает". Вопрос был задан во время #AskIE в Твиттере 19 июня 2014 г., и @IEDevChat ответил< "У нас есть активная ошибка для этого поведения. Следующая версия предоставит исправление"
Разработчики IE ответили во время AskIE сеанса в твиттере IEDevChat, что это известная ошибка в IE BugList, которую они исправят в будущей версии.
Обновление: - К сожалению, поведение заполнителя остается неизменным в IE11, но, похоже, работает в версиях Edge/Spartan.
В IE 10+ нет хорошего способа сделать placeholder пребывание на полевом фокусе, но если вы пытаетесь заменить ярлыки заполнителями, тогда вы должны взглянуть на это.
http://mozmonkey.com/2014/02/css-only-placeholders-field-labels-i-e-float-labels/
Это способ комбинирования заполнителей и ярлыков для улучшения пользовательского интерфейса.
Я думал, что поделился обходным решением, которое использовал для сортировки этой проблемы, поскольку IE11 по-прежнему не имеет исправления.
В моем примере - IE11 добавил мое значение-заполнителя в качестве фактического значения в текстовом поле.
Вот что я видел в своем шаблоне:
<textarea placeholder="Type your message">
</textarea>
Вот что изображено на интерфейсе в IE11:
<textarea placeholder="Type your message">
Type your message
</textarea>
Так как пользователь сосредоточился на поле - их курсор находился в конце строки "..message here" - нечетно!
Обходной путь для меня заключался в том, чтобы добавить начальный класс к элементу при загрузке. Затем базовое событие привязки "focus" для проверки наличия класса - если оно присутствует, оно удаляет val, а затем удаляет класс. Поэтому, как только пользователь сосредоточится на поле - значение reset для пустой строки.
Здесь событие привязки (этот конкретный пример был на динамически загруженном модальном - вы могли бы упростить это):
$(document).on( "focus", '.textarea', function () {
if ($(this).hasClass('placeholder-val-present')) {
$(this).val("").removeClass('placeholder-val-present');
}
});
Это хорошо работает, потому что, когда пользователь выходит за пределы поля, добавочный лист снова добавляется и работает нормально, как и ожидалось в IE11 и во всех других браузерах.
Я уверен, что это довольно нишевой пример, но он может пригодиться другим!
Хитрость заключается в том, чтобы вызвать focus() и select() для элемента ввода.
$("#elementId" ).focus();
$("#elementId" ).select();
лучшее решение! работать во всех браузерах
http://jsfiddle.net/q05ngura/3/
document.onkeydown = function(e) {
if(!e)e=event;
var checkVal = Number(this.value.length);
if((e.keyCode < 112 || e.keyCode > 123) && // F1 - F12
e.keyCode != 9 && // Tab
e.keyCode != 20 && // Caps lock
e.keyCode != 16 && // Shift
e.keyCode != 17 && // Ctrl
e.keyCode != 18 && // alt
e.keyCode != 91 && // Left window key
e.keyCode != 92 && // Right window key
e.keyCode != 27 && // Esc
e.keyCode != 37 && // Left arrow
e.keyCode != 38 && // Up arrow
e.keyCode != 39 && // Right arrow
e.keyCode != 40 && // Down arrow
e.keyCode != 13 && // Enter
e.keyCode != 45){ // Insert
checkVal = Number(this.value.length) + 1;
}
if(e.keyCode == '8'||e.keyCode == '46'){// backspace || delete
checkVal = Number(this.value.length) - 1;
}
if(checkVal > 0){
this.parentNode.getElementsByTagName('label')[0].style.zIndex = '-1';
}else{
this.parentNode.getElementsByTagName('label')[0].style.zIndex = '0';
}
});
body{
padding:0;
margin:0;
background-color:#ccc;
}
}
::-ms-reveal {
display: none;
}
input::-ms-clear {
display: none;
}
label{
position: absolute;
right: 60px;
margin-top: 10px;
font-size: 13px;
font-family: sans-serif;
color: #A9A9A9;
z-index:0;
pointer-events: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
label{
margin-top: -25px;
right: 57px;
}
}
@-moz-document url-prefix() {
label{
right: 69px;
}
}
#login-box{
position:relative;
margin:0 auto;
top:100px;
background-color:#fff;
width:270px;
height:270px;
border-radius:40px;
}
#login{
position:relative;
margin:0 auto;
text-align:center;
top:70px;
}
#login input[type="text"],#login input[type="password"]{
border:none;
border-bottom:1px solid #CCC;
padding:9px;
direction:rtl;
}
*:focus{
outline:none;
}
<div id="login-box">
<div id="login">
<table align="center" cellpadding="0">
<tr>
<td>
<input type="text" autocomplete="off" name="username" />
<label for="username">שם משתמש</label>
</td>
</tr>
<tr>
<td>
<input type="password" name="password" />
<label for="password">סיסמא</label>
</td>
</tr>
</table>
</div><!-- end login -->
</div><!-- end login box -->
Я немного поработал, и обнаружил, что есть псевдо-элементы CSS и псевдоклассы, которые можно использовать для создания заметок.
input:-ms-input-placeholder:focus{
color: #999;
}
См. этот ответ для получения дополнительной информации: fooobar.com/info/140/...