asp : textbox에 힌트를 넣는 방법


102

asp : TextBox 안에 힌트 / 자리 표시자를 어떻게 넣습니까? 힌트를 말할 때 사용자가 클릭하면 사라지는 텍스트를 의미합니다. html / css를 사용하여 동일한 결과를 얻을 수있는 방법이 있습니까?


2
어떤 브라우저를 지원합니까? HTML5 브라우저 placeholder는 텍스트 상자에 대한 속성을 지원합니다 .
rikitikitik 2013

답변:


200

placeholder속성

placeholder속성을 찾고 있습니다. ASP.net 컨트롤 내부의 다른 속성처럼 사용하십시오.

<asp:textbox id="txtWithHint" placeholder="hint" runat="server"/>

IDE (예 : Visual Studio)에 대해 신경 쓰지 마세요 . 속성을 모를 수도 있습니다. ASP.net에 등록되지 않은 속성은 그대로 전달되고 렌더링됩니다. 따라서 위의 코드는 (기본적으로) 다음과 같이 렌더링됩니다.

<input type="text" placeholder="hint"/>

사용 placeholder자원에서

컨트롤에 힌트를 적용하는 좋은 방법은 리소스를 사용 하는 것 입니다. 이렇게하면 현지화 된 힌트가있을 수 있습니다. index.aspx 파일이 있고 App_LocalResources / index.aspx.resx 파일에 다음이 포함되어 있다고 가정 해 보겠습니다.

<data name="WithHint.placeholder">
    <value>hint</value>
</data>

그리고 당신의 컨트롤은

<asp:textbox id="txtWithHint" meta:resourcekey="WithHint" runat="server"/>

렌더링 된 결과는 위 장의 결과와 동일하게 보입니다.

코드 뒤에 속성 추가

다른 속성과 마찬가지로 당신은 추가 할 수 있습니다 placeholder받는 사람 AttributeCollection:

txtWithHint.Attributes.Add("placeholder", "hint");

2
어떤 이유로 리소스 트릭 "WithHint.placeholder"이 작동하지 않았습니다.
Mmm

1
자원을 사용하는 경우, 당신은 로컬 리소스 파일에 대해이 작업을 수행 할 수 있습니다 <asp:TextBox ID="txtWithHint" runat="server" placeholder="<%$ Resources: 52 %>" />또는 글로벌 자원 :<asp:TextBox ID="txtWithHint" runat="server" placeholder="<%$ Resources: ResourceFile, ResourceValue %>" />
EvilDr

코드에 컨트롤을 추가 할 때 분명히 필요한 것은 myTextBox.Attributes.Add ( "placeholder", "hint");
Eliot Gillum

61

다음과 같이 작성하십시오.

<asp:TextBox ID="TextBox1" runat="server" placeholder="hi test"></asp:TextBox>

19
 <asp:TextBox runat="server" ID="txtPassword" placeholder="Password">

이것은 Intellisence가 자리 표시 자를 표시 하지 않기 때문에 작동하지 않는다고 느낄 수 있습니다.


7

코드 숨김에서 자리 표시 자 특성 추가 :

txtFilterTerm.Attributes.Add("placeholder", "Filter" + Filter.Name);

또는

txtFilterTerm.Attributes["placeholder"] = "Filter" + Filter.Name;

aspx 페이지에서 자리 표시 자 특성 추가

<asp:TextBox type="text" runat="server" id="txtFilterTerm" placeholder="Filter" />

또는

<input type="text" id="txtFilterTerm" placeholder="Filter"/>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.