클릭시 입력 텍스트의 기본값 삭제

클릭시 입력 텍스트의 기본값 삭제

---

입력 텍스트가 있습니다.

<input name="Email" type="text" id="Email" value="email@abc.com" />

"프로그래밍 질문이 무엇입니까? 구체적으로 작성하십시오."와 같은 기본값을 입력하고 싶습니다. StackOverFlow에서 사용자가 클릭하면 기본값이 사라집니다.

---

미래 참고로, 나는 이 이 작업을 수행 할 수있는 HTML5의 방법을 포함 할 수 있습니다.

<input name="Email" type="text" id="Email" value="email@abc.com" placeholder="What's your programming question ? be specific." />

HTML5 doctype 및 HTML5 호환 브라우저가 있으면 작동합니다. 그러나 현재 많은 브라우저에서이 기능을 지원하지 않으므로 최소한 Internet Explorer 사용자는 자리 표시자를 볼 수 없습니다. 그러나 솔루션 은 http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ ( archive.org 버전 )를 참조 하십시오 . 이를 사용하면 매우 현대적이고 표준을 준수하는 동시에 대부분의 사용자에게 기능을 제공 할 수 있습니다.

또한 제공된 링크는 잘 테스트되고 잘 개발 된 솔루션이므로 즉시 사용할 수 있습니다.

---

편집 :이 솔루션은 작동 하지만 아직 지원하지 않는 브라우저를 위해 -attribute 및 javascript fallback을 사용하는 MvanGeest의 솔루션을 아래에서 시도하는 것이 좋습니다 placeholder.

MvanGeest의 답변에서 JQuery 폴백에 해당하는 Mootools를 찾고 있다면 여기에 .

-

양식을 탭하는 키보드 사용자를 지원 하려면 onfocus및 onblur이벤트를 사용해야 합니다.

예를 들면 다음과 같습니다.

<input type="text" value="email@abc.com" name="Email" id="Email"
 onblur="if (this.value == '') {this.value = 'email@abc.com';}"
 onfocus="if (this.value == 'email@abc.com') {this.value = '';}" />

---

이것은 다소 깨끗하다고 ​​생각합니다. 입력의 "defaultValue"특성 사용법에 유의하십시오.

<script>
function onBlur(el) {
    if (el.value == '') {
        el.value = el.defaultValue;
    }
}
function onFocus(el) {
    if (el.value == el.defaultValue) {
        el.value = '';
    }
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>

---

jQuery를 사용하면 다음을 수행 할 수 있습니다.

$("input:text").each(function ()
{
    // store default value
    var v = this.value;

    $(this).blur(function ()
    {
        // if input is empty, reset value to default 
        if (this.value.length == 0) this.value = v;
    }).focus(function ()
    {
        // when input is focused, clear its contents
        this.value = "";
    }); 
});

그리고이 모든 것을 다음과 같이 사용자 정의 플러그인에 넣을 수 있습니다.

jQuery.fn.hideObtrusiveText = function ()
{
    return this.each(function ()
    {
        var v = this.value;

        $(this).blur(function ()
        {
            if (this.value.length == 0) this.value = v;
        }).focus(function ()
        {
            this.value = "";
        }); 
    });
};

플러그인을 사용하는 방법은 다음과 같습니다.

$("input:text").hideObtrusiveText();

이 코드 사용의 장점은 다음과 같습니다.

• 눈에 거슬리지 않고 DOM을 오염시키지 않습니다.
• 코드 재사용 : 여러 필드에서 작동합니다.
• 자체적으로 입력의 기본값을 파악합니다.

비 jQuery 접근 방식 :

function hideObtrusiveText(id)
{
    var e = document.getElementById(id);

    var v = e.value;

    e.onfocus = function ()
    {
        e.value = "";
    };

    e.onblur = function ()
    {
        if (e.value.length == 0) e.value = v;
    };
}

---

태그 안에 다음을 입력하고 onFocus = "value = ''"를 추가하면 최종 코드가 다음과 같이 표시됩니다.

<input type="email" id="Email" onFocus="value=''"> 

이것은 javascript onFocus () 이벤트 홀더를 사용합니다.

---

그냥 사용하는 placeholder사용자의 입력에 태그를 대신value

---

html5의 "placeholder"속성을 사용하여 js를 사용하지 않고 다음과 같이 할 수 있습니다 (사용자가를 입력하기 시작하면 기본 텍스트가 사라지지만을 클릭 할 때만 사라짐)

<input type="email" id="email" placeholder="xyz@abc.com">

이것을보십시오 : http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

---

<input name="Email" type="text" id="Email" placeholder="enter your question" />

플레이스 홀더 속성은 입력 필드의 예상 값을 설명하는 짧은 힌트를 지정합니다 (예 : 샘플 값 또는 예상 형식에 대한 간단한 설명).

The short hint is displayed in the input field before the user enters a value.

Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

I think this will help.

---

Here is very simple javascript. It works fine for me :

function sFocus (field) {
    if(field.value == 'Enter your search') {
        field.value = '';
    }
    field.className = "darkinput";
}

function sBlur (field) {
    if (field.value == '') {
        field.value = 'Enter your search';
        field.className = "lightinput";
    }
    else {
        field.className = "darkinput";
    }
}

---

Why remove value? its useful, but why not try CSS

input[submit] {
   font-size: 0 !important;
}

Value is important to check & validate ur PHP

---

Here is a jQuery solution. I always let the default value reappear when a user clears the input field.

<input name="Email" value="What's your programming question ? be specific." type="text" id="Email" value="email@abc.com" />

<script>
$("#Email").blur(
    function (){
        if ($(this).val() == "")
            $(this).val($(this).prop("defaultValue"));
        }
).focus(
    function (){
        if ($(this).val() == $(this).prop("defaultValue"))
            $(this).val("");
    }
);
</script>

---

I didn't see any really simple answers like this one, so maybe it will help someone out.

var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }

---

Here is an easy way.

#animal represents any buttons from the DOM.
#animal-value is the input id that being targeted.

$("#animal").on('click', function(){
    var userVal = $("#animal-value").val(); // storing that value
    console.log(userVal); // logging the stored value to the console
    $("#animal-value").val('') // reseting it to empty
});

참고URL : https://stackoverflow.com/questions/2984311/delete-default-value-of-an-input-text-on-click