Держать местозаполнитель в фокусе в IE10

Ответ 1

Документация по : -ms-input-placeholder псевдокласс из Центра разработчиков Internet Explorer, похоже, подразумевает, что это работает как задумано.

Текст заполнителя отображается с указанным стилем до поле имеет фокус, это означает, что поле может быть набрано. Когда поле имеет фокус, оно возвращается к нормальному стилю поля ввода и текст заполнителя исчезает.

Изменить: Если бы мне пришлось подражать этому поведению, я бы посмотрел библиотеки заполнителя заполнителя (которые устанавливают значение по умолчанию, плавающий серый текст над полем ввода и т.д.), Которые работают с более старыми версиями IE. Их нужно будет изменить, потому что они, вероятно, позволяют обнаруживать возможности заполнителя и переносить их в браузер. Кроме того, это может иметь запах браузера, обнаруживающий код.

Обновление: "Текст заполнителя IE исчезает". Вопрос был задан во время #AskIE в Твиттере 19 июня 2014 г., и @IEDevChat ответил< "У нас есть активная ошибка для этого поведения. Следующая версия предоставит исправление"

Ответ 2

Разработчики IE ответили во время AskIE сеанса в твиттере IEDevChat, что это известная ошибка в IE BugList, которую они исправят в будущей версии.

Обновление: - К сожалению, поведение заполнителя остается неизменным в IE11, но, похоже, работает в версиях Edge/Spartan.

Ответ 3

В IE 10+ нет хорошего способа сделать placeholder пребывание на полевом фокусе, но если вы пытаетесь заменить ярлыки заполнителями, тогда вы должны взглянуть на это.

http://mozmonkey.com/2014/02/css-only-placeholders-field-labels-i-e-float-labels/

Это способ комбинирования заполнителей и ярлыков для улучшения пользовательского интерфейса.

Ответ 4

Я думал, что поделился обходным решением, которое использовал для сортировки этой проблемы, поскольку 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 и во всех других браузерах.

Я уверен, что это довольно нишевой пример, но он может пригодиться другим!

Ответ 5

Хитрость заключается в том, чтобы вызвать focus() и select() для элемента ввода.

$("#elementId" ).focus();
$("#elementId" ).select();

Ответ 6

лучшее решение! работать во всех браузерах

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 -->

Ответ 7

Я немного поработал, и обнаружил, что есть псевдо-элементы CSS и псевдоклассы, которые можно использовать для создания заметок.

input:-ms-input-placeholder:focus{
    color: #999;
}

См. этот ответ для получения дополнительной информации: fooobar.com/info/140/...