입력이 대문자 여야 할 때 자리 표시 자에 대해 일반 대소 문자를 사용하는 더 좋은 방법이 있습니까? 최신 브라우저에서 가능하면 CSS3에서이 작업을 전적으로 수행하고 싶습니다.
그 이유는 소문자로 다시 전환하면 대문자를 추가하거나 제거 할 때 약간 복잡해 보이고 자리 표시자가 일반 텍스트로 표시되기 때문입니다. 패턴이 있지만 사용자 입력을 위해 대문자로 전환하고 자리 표시자를 위해 일반 대문자로 다시 전환하는 데는 작동하지 않습니다.
입력:
<input name="myInputText" data-case="UPPER" data-placeholder-case="regular" pattern="[A-Z]*" type=text placeholder="You will be FORCED to use UPPERCASE!" />
변경 또는 keydown 이벤트가있을 때 JQuery val (). toUpperCase () 사용 :
$("myInputText").on("keydown", function() {
if ($("myInputText").val().length > 0)
{
$("myInputText").val("myInputText").val().toUpperCase());
$("myInputText").css("text-transform", "uppercase");
} else { $("myInputText").css("text-transform", ""); }
}).on("change", function() {
if ($("myInputText").val().length > 0)
{
$("myInputText").val("myInputText").val().toUpperCase());
} else { $("myInputText").css("text-transform", ""); }
});
참조 :
모든 브라우저에서 작동하지 않는 문제를 처리하려는 경우 text-transform자리 표시 자에 대해 다르게 설정할 수 있습니다 .
input {
text-transform: uppercase;
}
::-webkit-input-placeholder {
text-transform: none;
}
:-moz-placeholder {
text-transform: none;
}
::-moz-placeholder {
text-transform: none;
}
:-ms-input-placeholder {
text-transform: none;
}<input type="text" placeholder="place holder" />이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다