HTML 텍스트 상자가 비어 있을 때 힌트를 표시하도록 하려면 어떻게 해야 합니까?
-
01-07-2019 - |
문제
내 웹페이지의 검색창에 "검색"이라는 단어가 회색 기울임꼴로 표시되기를 원합니다.상자가 포커스를 받으면 빈 텍스트 상자처럼 보일 것입니다.이미 텍스트가 있는 경우 텍스트가 정상적으로 표시됩니다(검은색, 기울임꼴 아님).이렇게 하면 라벨을 제거하여 혼란을 피하는 데 도움이 됩니다.
그런데, 이건 페이지에 있는 내용이에요 아약스 검색이라 버튼이 없습니다.
해결책
또 다른 옵션은 최신 브라우저에서만 이 기능을 사용하고 싶다면 HTML 5에서 제공하는 지원을 사용하는 것입니다. 자리 표시자 기인하다:
<input name="email" placeholder="Email Address">
스타일이 없으면 Chrome에서는 다음과 같습니다.
데모를 사용해 볼 수 있습니다. 여기 그리고 CSS를 사용한 HTML5 자리 표시자 스타일링.
반드시 확인하세요. 이 기능의 브라우저 호환성.Firefox 지원은 3.7에 추가되었습니다.크롬은 괜찮습니다.Internet Explorer는 10에만 지원을 추가했습니다.입력 자리 표시자를 지원하지 않는 브라우저를 대상으로 하는 경우 다음이라는 jQuery 플러그인을 사용할 수 있습니다. jQuery HTML5 자리표시자, 을 클릭한 후 다음 JavaScript 코드를 추가하여 활성화하세요.
$('input[placeholder], textarea[placeholder]').placeholder();
다른 팁
이는 텍스트 상자 워터마크로 알려져 있으며 JavaScript를 통해 수행됩니다.
또는 jQuery를 사용하는 경우 훨씬 더 나은 접근 방식은 다음과 같습니다.
당신은 설정할 수 있습니다 자리 표시자 사용하여 placeholder
기인하다 HTML(브라우저 지원).그만큼 font-style
그리고 color
될 수 있다 CSS로 변경됨 (브라우저 지원은 제한되어 있지만)
input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
color:gray;
font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
color:gray;
font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
color:gray;
font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
color:gray;
font-style:italic;
}
<input placeholder="Search" type="search" name="q">
특수 CSS 클래스를 추가 및 제거하고 입력 값을 수정할 수 있습니다. onfocus
/onblur
자바스크립트로:
<input type="text" class="hint" value="Search..."
onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">
그런 다음 힌트 예를 들어 CSS에서 원하는 스타일을 사용하는 클래스:
input.hint {
color: grey;
}
가장 좋은 방법은 다음과 같은 일종의 JavaScript 라이브러리를 사용하여 JavaScript 이벤트를 연결하는 것입니다. jQuery 또는 유이 코드를 외부 .js 파일에 넣으세요.
그러나 빠르고 더러운 솔루션을 원한다면 이것이 인라인 HTML 솔루션입니다.
<input type="text" id="textbox" value="Search"
onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}"
onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />
업데이트됨:요청하신 색상 항목을 추가했습니다.
나는 게시했다 내 웹사이트에 이에 대한 솔루션이 나와 있습니다. 전자.그것을 사용하려면 단일을 가져 오십시오. .js
파일:
<script type="text/javascript" src="/hint-textbox.js"></script>
그런 다음 CSS 클래스를 사용하여 힌트를 원하는 입력에 주석을 답니다. hintTextbox
:
<input type="text" name="email" value="enter email" class="hintTextbox" />
더 많은 정보와 예시를 확인하실 수 있습니다. 여기.
다음은 Google Ajax 라이브러리 캐시와 일부 jQuery 매직을 사용한 기능적 예입니다.
CSS는 다음과 같습니다.
<style type="text/stylesheet" media="screen">
.inputblank { color:gray; } /* Class to use for blank input */
</style>
이는 JavaScript 코드입니다.
<script language="javascript"
type="text/javascript"
src="http://www.google.com/jsapi">
</script>
<script>
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
$("#search_form")
.submit(function() {
alert("Submitted. Value= " + $("input:first").val());
return false;
});
$("#keywords")
.focus(function() {
if ($(this).val() == 'Search') {
$(this)
.removeClass('inputblank')
.val('');
}
})
.blur(function() {
if ($(this).val() == '') {
$(this)
.addClass('inputblank')
.val('Search');
}
});
});
</script>
그리고 이것은 HTML이 될 것입니다:
<form id="search_form">
<fieldset>
<legend>Search the site</legend>
<label for="keywords">Keywords:</label>
<input id="keywords" type="text" class="inputblank" value="Search"/>
</fieldset>
</form>
GAJAXLibs와 jQuery 모두에 관심을 가지기에 충분하길 바랍니다.
이제는 매우 쉬워졌습니다.HTML에서는 다음을 제공할 수 있습니다. 자리 표시자 에 대한 속성 입력 강요.
예를 들어
<input type="text" name="fst_name" placeholder="First Name"/>
자세한 내용을 확인하세요.http://www.w3schools.com/tags/att_input_placeholder.asp
jQuery 사용자의 경우:naspinski의 jQuery 링크가 손상된 것 같지만 다음을 시도해 보세요.http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
보너스로 무료 jQuery 플러그인 튜토리얼을 얻을 수 있습니다.:)
jQuery 플러그인을 찾았습니다 jQuery 워터마크 상위 답변에 나열된 것보다 낫습니다.왜 더 나은가?비밀번호 입력 필드를 지원하기 때문입니다.또한 워터마크(또는 기타 속성)의 색상을 설정하는 것은 워터마크를 만드는 것만큼 쉽습니다. .watermark
CSS 파일에서 참조하세요.
이것을 "워터마크"라고 합니다.
jQuery 플러그인을 찾았습니다 jQuery 워터마크 첫 번째 답변과 달리 추가 설정이 필요하지 않습니다(원래 답변에도 양식을 제출하기 전에 특별한 호출이 필요함).
사용 jQuery 양식 알리미 - 가장 인기 있는 jQuery 플러그인 중 하나이며 여기에 있는 다른 jQuery 제안 중 일부에서 발생하는 버그로 인해 어려움을 겪지 않습니다(예를 들어 데이터베이스에 저장되는지 걱정하지 않고 워터마크 스타일을 자유롭게 지정할 수 있습니다).
jQuery 워터마크는 양식 요소에 직접 단일 CSS 스타일을 사용합니다(워터마크에 적용된 CSS 글꼴 크기 속성도 텍스트 상자에 영향을 미쳤습니다. 이는 제가 원하는 것이 아닙니다).jQuery Watermark의 장점은 텍스트를 필드에 끌어서 놓을 수 있다는 것입니다(jQuery Form Notifier는 이를 허용하지 않습니다).
다른 사람들이 제안한 또 다른 것(digitalbrush.com에 있는 것)은 실수로 워터마크 값을 양식에 제출하므로 이에 반대하는 것이 좋습니다.
배경 이미지를 사용하여 텍스트를 렌더링합니다.
input.foo { }
input.fooempty { background-image: url("blah.png"); }
그렇다면 당신이 해야 할 일은 감지하는 것뿐이다. value == 0
올바른 클래스를 적용하십시오.
<input class="foo fooempty" value="" type="text" name="bar" />
jQuery JavaScript 코드는 다음과 같습니다.
jQuery(function($)
{
var target = $("input.foo");
target.bind("change", function()
{
if( target.val().length > 1 )
{
target.addClass("fooempty");
}
else
{
target.removeClass("fooempty");
}
});
});
"검색"이라는 상자를 쉽게 읽은 다음 초점이 변경되면 텍스트가 제거되도록 할 수 있습니다.이 같은:
<input onfocus="this.value=''" type="text" value="Search" />
물론 그렇게 하면 사용자가 클릭할 때 자신의 텍스트가 사라지게 됩니다.따라서 아마도 좀 더 강력한 것을 사용하고 싶을 것입니다.
<input name="keyword_" type="text" size="25" style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">
페이지가 처음 로드되면 텍스트 상자에 검색이 나타나도록 합니다. 원하는 경우 회색으로 표시됩니다.
입력 상자가 포커스를 받으면 사용자가 바로 입력을 시작할 수 있도록 검색 상자의 텍스트를 모두 선택합니다. 그러면 선택한 텍스트가 삭제됩니다.사용자가 이전 텍스트를 삭제하기 위해 수동으로 강조 표시할 필요가 없기 때문에 사용자가 검색 상자를 두 번째로 사용하려는 경우에도 잘 작동합니다.
<input type="text" value="Search" onfocus="this.select();" />
나는 간단하고 명확한 "Knowledge Chikuse"의 솔루션을 좋아합니다.페이지 로드가 준비되면 초기 상태를 설정하는 블러 호출만 추가하면 됩니다.
$('input[value="text"]').blur();
onfocus에 다음과 같은 것을 할당하고 싶습니다:
if (this.value == this.defaultValue)
this.value = ''
this.className = ''
그리고 이것을 흐리게 하려면:
if (this.value == '')
this.value = this.defaultValue
this.className = 'placeholder'
(원하는 경우 프레임워크 기능과 같은 좀 더 영리한 기능을 사용하여 클래스 이름을 전환할 수 있습니다.)
다음과 같은 CSS를 사용하면:
input.placeholder{
color: gray;
font-style: italic;
}
$('input[value="text"]').focus(function(){
if ($(this).attr('class')=='hint')
{
$(this).removeClass('hint');
$(this).val('');
}
});
$('input[value="text"]').blur(function(){
if($(this).val() == '')
{
$(this).addClass('hint');
$(this).val($(this).attr('title'));
}
});
<input type="text" value="" title="Default Watermark Text">
간단한 HTML '필수' 태그가 유용합니다.
<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>
사용자 AJAXToolkit http://asp.net