HTML / CSS 회색으로 표시된 텍스트가있는 텍스트 상자를 만들고 정보를 입력하기 위해 클릭하면 사라지는 방법은 무엇입니까?

HTML / CSS 회색으로 표시된 텍스트가있는 텍스트 상자를 만들고 정보를 입력하기 위해 클릭하면 사라지는 방법은 무엇입니까?

---

회색으로 표시된 내용이있는 텍스트 상자를 만들려면 어떻게해야하며, 텍스트를 입력하기 위해 클릭하면 회색으로 표시된 부분이 사라지고 원하는 텍스트를 입력 할 수 있습니까?

예:

"이름"텍스트 상자. 회색으로 표시된 텍스트 상자 안에 "이름"이라는 단어가 있습니다. 클릭하면 해당 단어가 사라지고 그 안에 내 이름을 씁니다.

---

이 답변은 HTML5 이전 접근 방식을 보여줍니다. 속성을 사용하는 최신 솔루션에 대한 Psytronic의 답변 을 살펴보십시오 placeholder.

---

HTML :

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

자바 스크립트 :

function inputFocus(i) {
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}

---

Chrome, Firefox, IE10 및 Safari는 html5 자리 표시 자 속성을 지원합니다.

<input type="text" placeholder="First Name:" />

더 많은 크로스 브라우저 솔루션을 얻으려면 약간의 자바 스크립트를 사용해야합니다. 제가 머릿속에서 어떤 것도 알지 못하지만 미리 만들어진 솔루션이 많이 있습니다.

http://www.w3schools.com/tags/att_input_placeholder.asp

---

HTML5를 사용하면 기본적으로 다음을 수행 할 수 있습니다. <input name="first_name" placeholder="First Name">

이것은 (IE) 모든 브라우저에서 지원되지 않습니다.

이것은 작동 할 수 있습니다.

<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null">

그렇지 않고 jQuery를 사용하는 경우 .focus 및 .css를 사용하여 색상을 변경할 수 있습니다.

---

HTML5 만 타겟팅하는 경우 다음을 사용할 수 있습니다.

<input type="text" id="firstname" placeholder="First Name:" />

HTML5가 아닌 브라우저의 경우 jQuery를 사용하여 Floern의 답변을 기반으로 작성하고 자바 스크립트를 눈에 띄지 않게 만듭니다. 또한 클래스를 사용하여 흐리게 속성을 정의합니다.

$(document).ready(function () {

    //Set the initial blur (unless its highlighted by default)
    inputBlur($('#Comments'));

    $('#Comments').blur(function () {
        inputBlur(this);
    });
    $('#Comments').focus(function () {
        inputFocus(this);
    });

})

기능 :

function inputFocus(i) {
    if (i.value == i.defaultValue) {
        i.value = "";
        $(i).removeClass("blurredDefaultText");
    }
}
function inputBlur(i) {
    if (i.value == "" || i.value == i.defaultValue) {
        i.value = i.defaultValue;
        $(i).addClass("blurredDefaultText");
    }
}

CSS :

.blurredDefaultText {
    color:#888 !important;
}

---

가장 짧은 방법은 변경하려는 입력 유형에 추가 속성으로 아래 코드를 직접 추가하는 것입니다.

onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'"

참고 : "검색"텍스트를 "이동"또는 요구 사항에 맞게 다른 텍스트로 변경하십시오.

---

이것은 작동합니다 :

<input type="text" id="firstname" placeholder="First Name" />

참고 : 자리 표시 자, ID 및 유형 값을 "이메일"또는 필요에 맞게 변경할 수 있습니다.

W3Schools의 자세한 내용 : http://www.w3schools.com/tags/att_input_placeholder.asp

그러나 지금까지 최고의 솔루션은 Floern과 Vivek Mhatre (j0k 편집)입니다.

나는이 코드 일반적인 웹 페이지입니다 아래를.

.Submit {
    background-color: #008CBA;
    border: 3px;
    color: white;
    padding: 8px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
div {
  background-color: yellow;
  }

<div>
  <center>
  <p>Some functions may not work, such as the css ect.
  <p>First Name:<input type="text" id="firstname" placeholder="John" />
  <p>Surname:<input type="text" id="surname" placeholder="Doe" />
  <p>Email:<input type="email" id="email" placeholder="john.doe@example.com" />
  <p>Password:<input type="email" id="email" placeholder="john.doe@example.com" />
  <br /><button class="submit">Submit</button>                 </center>
</div>

---

이것은 이해를 돕기위한 정교한 버전입니다.

function setVolatileBehavior(elem, onColor, offColor, promptText){
elem.addEventListener("change", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("blur", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("focus", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.value=promptText;
elem.style.color=offColor;
}

다음과 같이 사용하십시오.

setVolatileBehaviour(document.getElementById('yourElementID'),'black','gray','Name');

---

Floern의 솔루션을 사용할 수 있습니다. 색상을 회색으로 설정하는 동안 입력을 비활성화 할 수도 있습니다. http://www.w3schools.com/tags/att_input_disabled.asp

참고URL : https://stackoverflow.com/questions/4681036/html-css-making-a-textbox-with-text-that-is-grayed-out-and-disappears-when-i-cl