IE10에서 자리 표시 자에 초점 유지

IE10에서 자리 표시 자에 초점 유지

---

웹킷과 파이어 폭스, A의 텍스트에서 input의 placeholder스틱 주위에 focus때까지 - 그것은 사라지지 않는 input.val사실에 뭔가가있다.

IE10이 동일한 작업을 수행하도록하는 좋은 방법이 있습니까?

---

Internet Explorer 개발자 센터 의 : -ms-input-placeholder 의사 클래스 문서는 이것이 설계된대로 작동하고 있음을 암시하는 것 같습니다.

자리 표시 자 텍스트는 필드에 포커스가있을 때까지 지정된 스타일로 표시됩니다. 즉, 필드를 입력 할 수 있습니다. 필드에 포커스가 있으면 입력 필드의 일반 스타일로 돌아가고 자리 표시 자 텍스트가 사라집니다.

편집 : 이 동작을 모방해야한다면 이전 버전의 IE에서 작동하는 자리 표시 자 폴리 필 라이브러리 (기본값 설정, 입력 상자 위에 회색 텍스트 부동 등)를 살펴 봅니다. 그들은 아마도 플레이스 홀더 기능을 감지하고 브라우저를 연기하기 때문에 수정해야 할 것입니다. 또한 "브라우저 감지"코드 냄새가 발생합니다.

업데이트 : 질문은 "IE의 자리 표시 자 텍스트가 사라집니다" 트위터 동안 질문을 받았다 #AskIE의 2014년 6월 19일에 질문 세션 및 @IEDevChat는 반응 "우리는이 문제에 대한 활성 버그가 다음 버전이 수정 프로그램을 제공 할 것입니다."

---

IE 개발자는 트위터 IEDevChat 의 AskIE 세션 에서 이것이 향후 버전에서 수정 될 IE BugList 의 알려진 버그라고 응답했습니다.

업데이트 :-불행히도 자리 표시 자 동작은 IE11에서 여전히 동일하지만 Edge / Spartan 버전에서 작동하는 것 같습니다.

---

IE 10+에서 자리 표시자를 필드 포커스에 유지하는 좋은 방법은 없지만 레이블을 자리 표시 자로 바꾸려는 경우 이것을 살펴보아야합니다.

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

사용자 경험을 향상시키기 위해 자리 표시 자와 레이블을 결합하는 방법입니다.

---

IE11에 여전히 수정 사항이없는 것처럼 보이므로이 문제를 정렬하는 데 사용한 해결 방법을 공유 할 것이라고 생각했습니다.

내 예에서 IE11은 내 자리 표시 자 값을 텍스트 영역 내의 실제 값으로 추가했습니다.

내 템플릿보기에있는 내용은 다음과 같습니다.

<textarea placeholder="Type your message">
</textarea>

IE11의 프런트 엔드에 렌더링 된 내용은 다음과 같습니다.

<textarea placeholder="Type your message">
    Type your message
</textarea>

따라서 사용자가 필드에 초점을 맞추었을 때 커서가 '..message here'문자열 끝에있었습니다. 이상합니다!

나를위한 해결 방법은로드시 요소에 초기 클래스를 추가하는 것이 었습니다. 그런 다음 클래스가 존재하는지 확인하기위한 'focus'bind 이벤트에 대한 기본-존재하는 경우 val을 제거한 다음 클래스도 제거합니다. 따라서 사용자가 필드에 집중하자마자 값이 빈 문자열로 재설정됩니다.

다음은 bind 이벤트입니다 (이 특정 예제는 동적으로로드 된 모달에 있습니다. 간단하게 할 수 있습니다).

$(document).on( "focus", '.textarea', function () {
    if ($(this).hasClass('placeholder-val-present')) {
        $(this).val("").removeClass('placeholder-val-present');
    }
});

이것은 사용자가 필드를 벗어나면 자리 표시자가 다시 추가되고 IE11 및 다른 모든 브라우저에서 예상 한대로 정상적으로 작동하기 때문에 훌륭하게 작동합니다.

이것은 꽤 틈새 시장의 예라고 확신합니다. 그러나 다른 사람들에게는 유용 할 수 있습니다!

---

최고의 솔루션! 모든 브라우저에서 작동

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

자세한 정보는이 답변을 참조하십시오 : https://stackoverflow.com/a/2610741

참고 URL : https://stackoverflow.com/questions/14445891/keep-placeholder-on-focus-in-ie10