นี้จะกระทำโดยอัตโนมัติสำหรับเบราว์เซอร์ทุกยกเว้นChrome

ฉันเดาฉันต้องกำหนดเป้าหมายเฉพาะChrome

ทางออกใด ๆ ?

ถ้าไม่ได้กับCSSแล้วด้วยjQuery ?

ขอแสดงความนับถือ.

<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

แก้ไข: เบราว์เซอร์ทั้งหมดรองรับทันที

input:focus::placeholder {
  color: transparent;
}

<input type="text" placeholder="Type something here!">

Firefox 15 และ IE 10+ ก็รองรับสิ่งนี้เช่นกัน หากต้องการขยายโซลูชัน CSS ของ Casey Chu :

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

นี่เป็นวิธีแก้ปัญหา CSS เท่านั้น (สำหรับตอนนี้ใช้ได้เฉพาะใน WebKit):

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

Pure CSS Solution (ไม่จำเป็นต้องใช้ JS)

สร้างจากคำตอบของ @Hexodus และ @Casey Chu นี่คือโซลูชันที่ได้รับการอัปเดตและข้ามเบราว์เซอร์ที่ใช้ความทึบของ CSS และการเปลี่ยนผ่านเพื่อทำให้ข้อความตัวยึดจางหายไป มันทำงานสำหรับองค์ประกอบใด ๆ ที่สามารถใช้ตัวยึดรวมถึงtextareaและinputแท็ก

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

แก้ไข: อัปเดตเพื่อรองรับเบราว์เซอร์ที่ทันสมัย

คุณลองใช้ตัวยึดตำแหน่งแล้วหรือยัง

<input id ="myID" type="text" placeholder="enter your text " />

-EDIT-

ฉันเห็นลองตอนนี้แล้ว:

$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});

ทดสอบ: http://jsfiddle.net/mPLFf/4/

-EDIT-

ที่จริงแล้วควรใช้ตัวยึดตำแหน่งเพื่ออธิบายค่าไม่ใช่ชื่อของอินพุต ฉันขอแนะนำทางเลือกดังต่อไปนี้

HTML:

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

javascript:

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});

CSS:

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}

ทดสอบ:

http://jsfiddle.net/kwynwrcf/

หากต้องการเพิ่ม @ คำตอบของ casey-chu และ pirate rob ต่อไปนี้เป็นวิธีการทำงานร่วมกันของเบราว์เซอร์ข้าม:

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

คำตอบของ Toni นั้นดี แต่ฉันอยากจะดรอปIDและใช้อย่างชัดเจนinputด้วยวิธีนี้อินพุตทั้งหมดที่มีplaceholderพฤติกรรม:

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

โปรดทราบว่า$(function(){ });เป็นการจดชวเลขสำหรับ$(document).ready(function(){ });:

$(function(){
    $('input').data('holder',$('input').attr('placeholder'));
    $('input').focusin(function(){
        $(this).attr('placeholder','');
    });
    $('input').focusout(function(){
        $(this).attr('placeholder',$(this).data('holder'));
    });
})

การสาธิต.

ฉันชอบทำสิ่งนี้ในพื้นที่ชื่อและเรียกใช้องค์ประกอบที่มีแอตทริบิวต์ "ตัวยึด" ...

$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};

บางครั้งคุณต้องการความเฉพาะเจาะจงเพื่อให้แน่ใจว่าสไตล์ของคุณจะถูกนำไปใช้กับปัจจัยที่แข็งแกร่งที่สุดidขอบคุณ @Rob Fletcher สำหรับคำตอบที่ยอดเยี่ยมของเขาใน บริษัท ของเราที่เราได้ใช้

ดังนั้นโปรดพิจารณาการเพิ่มสไตล์นำหน้าด้วย ID ของแอปคอนเทนเนอร์

    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }

ด้วย CSS บริสุทธิ์มันทำงานได้สำหรับฉัน ทำให้มันโปร่งใสเมื่อป้อน / Focues ในอินพุต

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }

หากต้องการปรับแต่งตัวอย่างโค้ดของWallace Sidhréeเพิ่มเติม:

$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})

วิธีนี้ช่วยให้มั่นใจได้ว่าอินพุตแต่ละตัวเก็บข้อความตัวแทนที่ถูกต้องไว้ในแอตทริบิวต์ข้อมูล

ดูตัวอย่างการทำงานที่นี่ใน jsFiddle

ฉันชอบวิธี css spiced กับการเปลี่ยน On Focus ตัวยึดนั้นหายไป;) ใช้ได้กับ textareas ด้วย

ขอบคุณ @Casey Chu สำหรับแนวคิดที่ยอดเยี่ยม

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}

การใช้ SCSS พร้อมกับhttp://bourbon.io/โซลูชันนี้ใช้งานง่ายสวยงามและใช้งานได้บนเว็บเบราว์เซอร์ทั้งหมด:

input:focus {
  @include placeholder() {
    color: transparent;
  }
}

ใช้บูร์บง! ดีสำหรับคุณ !

CSS ชิ้นนี้เหมาะกับฉัน:

input:focus::-webkit-input-placeholder {
        color:transparent;

}

สำหรับโซลูชันที่ใช้ CSS บริสุทธิ์:

input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}

หมายเหตุ: ยังไม่ได้รับการสนับสนุนจากผู้จำหน่ายเบราว์เซอร์ทั้งหมด

การอ้างอิง: ซ่อนข้อความตัวยึดที่โฟกัสด้วย CSSโดย Ilia Raiskin

HTML:

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

jQuery:

$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});

2018> JQUERY v.3.3 โซลูชัน: การทำงานต่อเนื่องสำหรับอินพุตทั้งหมด, textarea พร้อมตัวยึดตำแหน่ง

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});

การสาธิตอยู่ที่นี่: jsfiddle

ลองสิ่งนี้:

//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });

        });

}

สำหรับอินพุต

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

สำหรับ textarea

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }

$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});

นอกจากทั้งหมดข้างต้นฉันมีสองแนวคิด

คุณสามารถเพิ่มองค์ประกอบที่เลียนแบบ palceholder จากนั้นใช้จาวาสคริปต์ควบคุมองค์ประกอบที่แสดงและซ่อน

แต่มันซับซ้อนมากอีกอันหนึ่งใช้ตัวเลือกของพี่ชายแค่นี้:

.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; } 

23333 ฉันมีภาษาอังกฤษไม่ดีหวังว่าจะแก้ปัญหาของคุณ

ลองใช้ฟังก์ชั่นนี้:

+ มันจะซ่อน PlaceHolder On Focus และคืนมันกลับมาพร่ามัว

+ ฟังก์ชั่นนี้ขึ้นอยู่กับตัวเลือกตัวแทนก่อนอื่นก็เลือกองค์ประกอบที่มีคุณสมบัติตัวยึดตำแหน่งเรียกใช้ฟังก์ชั่นในการมุ่งเน้นและอีกคนหนึ่งในการเบลอ

on focus: มันเพิ่มแอททริบิวต์ "data-text" ให้กับอิลิเมนต์ที่รับค่าของมันจากแอ็ตทริบิวต์ตัวยึดตำแหน่งจากนั้นมันจะลบค่าของแอททริบิวตัวยึด

บนเบลอ: มันจะส่งคืนค่าตัวยึดตำแหน่งและลบออกจากแอตทริบิวต์ data-text

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

$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});

คุณสามารถติดตามฉันได้เป็นอย่างดีถ้าคุณดูว่าเกิดอะไรขึ้นเบื้องหลังโดยการตรวจสอบองค์ประกอบอินพุต

สิ่งเดียวกันที่ฉันได้ใช้ในเชิงมุม 5

ฉันสร้างสตริงใหม่สำหรับเก็บตัวยึดตำแหน่ง

newPlaceholder:string;

จากนั้นฉันใช้ฟังก์ชั่นโฟกัสและเบลอที่กล่องป้อนข้อมูล (ฉันใช้การเติมข้อความอัตโนมัติที่สำคัญ)

ตัวยึดตำแหน่งด้านบนกำลังถูกตั้งค่าจาก typescript

สองฟังก์ชั่นที่ฉันใช้อยู่ -

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}

ไม่จำเป็นต้องใช้ CSS หรือ JQuery คุณสามารถทำได้ทันทีจากแท็กอินพุต HTML

ตัวอย่างเช่นในกล่องอีเมลด้านล่างข้อความตัวยึดจะหายไปหลังจากคลิกภายในและข้อความจะปรากฏขึ้นอีกครั้งหากคลิกภายนอก

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }