Điều này được thực hiện tự động cho mọi trình duyệt ngoại trừ Chrome .

Tôi đoán tôi phải nhắm mục tiêu cụ thể Chrome .

Giải pháp nào?

Nếu không phải với CSS , thì với jQuery ?

Trân trọng.

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

Chỉnh sửa: Tất cả các trình duyệt hỗ trợ ngay bây giờ

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

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

Firefox 15 và IE 10+ cũng hỗ trợ điều này ngay bây giờ. Để mở rộng trên giải pháp CSS của 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+ */

Đây là một giải pháp chỉ dành cho CSS (hiện tại, chỉ hoạt động trong WebKit):

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

Giải pháp CSS thuần túy (không yêu cầu JS)

Dựa trên các câu trả lời của @Hexodus và @Casey Chu, đây là một giải pháp cập nhật và trình duyệt chéo, tận dụng độ mờ và chuyển đổi CSS để làm mờ văn bản giữ chỗ. Nó hoạt động cho bất kỳ yếu tố nào có thể sử dụng trình giữ chỗ, bao gồm textareavà inputthẻ.

::-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 */

Chỉnh sửa: Cập nhật để hỗ trợ các trình duyệt hiện đại.

bạn đã thử attr attholder chưa?

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

-BIÊN TẬP-

Tôi hiểu rồi, hãy thử điều này sau đó:

$(function () {

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

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


});

Kiểm tra: http://jsfiddle.net/mPLFf/4/

-BIÊN TẬP-

Trên thực tế, vì giữ chỗ nên được sử dụng để mô tả giá trị, không phải tên của đầu vào. Tôi đề nghị phương án sau

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;
}

Kiểm tra:

http://jsfiddle.net/kwynwrcf/

Để tăng câu trả lời của @ casey-chu và cướp biển, đây là một cách tương thích với nhiều trình duyệt hơn:

    /* 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; }

Câu trả lời của Toni là tốt, nhưng tôi thà bỏ IDvà sử dụng một cách rõ ràng input, theo cách đó tất cả các đầu vào placeholdercó hành vi:

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

Lưu ý đó $(function(){ });là tốc ký cho $(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'));
    });
})

Bản giới thiệu.

Tôi muốn gói nó trong không gian tên và chạy trên các phần tử với thuộc tính "giữ chỗ" ...

$("[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'));
        });
    });
};

Đôi khi bạn cần CỤ THỂ để đảm bảo phong cách của bạn được áp dụng với yếu tố mạnh nhấtid Cảm ơn @Rob Fletcher vì câu trả lời tuyệt vời của anh ấy, trong công ty chúng tôi đã sử dụng

Vì vậy, hãy xem xét việc thêm các kiểu tiền tố với id của vùng chứa ứng dụng

    #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;
    }

Với CSS thuần, nó hoạt động với tôi. Làm cho nó trong suốt khi được nhập / Focues trong đầu vào

 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;
  }

Để tinh chỉnh thêm mẫu mã của 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'));
      });
})

Điều này đảm bảo rằng mỗi đầu vào lưu trữ văn bản giữ chỗ chính xác trong thuộc tính dữ liệu.

Xem một ví dụ làm việc ở đây trong jsFiddle .

Tôi thích cách tiếp cận css gia vị với sự chuyển tiếp. Tập trung vào trình giữ chỗ mờ dần;) Hoạt động cũng cho textareas.

Cảm ơn @Casey Chu vì ý tưởng tuyệt vời.

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;
}

Sử dụng SCSS cùng với http://bourbon.io/ , giải pháp này đơn giản, thanh lịch và hoạt động trên tất cả các trình duyệt web:

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

Sử dụng Bourbon! Điều đó tốt cho bạn!

Đoạn CSS này hoạt động với tôi:

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

}

Đối với một giải pháp dựa trên CSS thuần túy:

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

Lưu ý: Chưa được hỗ trợ bởi tất cả các nhà cung cấp trình duyệt.

Tham khảo: Ẩn văn bản giữ chỗ trên tiêu điểm với CSS của 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 GIẢI PHÁP: Làm việc toàn cầu cho tất cả các đầu vào, textarea với trình giữ chỗ.

 $(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);
         };
     }); 
});

Demo ở đây: jsfiddle

Thử cái này :

//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'));
            });

        });

}

cho đầu vào

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

cho văn bản

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");
    });
});

Ngoài tất cả những điều trên, tôi có hai ý tưởng.

Bạn có thể thêm một yếu tố bắt chước palceholder. Sau đó, sử dụng javascript kiểm soát phần tử hiển thị và ẩn.

Nhưng nó rất phức tạp, một cái khác đang sử dụng bộ chọn css của anh trai. Chỉ cần như thế này:

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

23333, tôi có một tiếng Anh kém. Hy vọng giải quyết vấn đề của bạn.

thử chức năng này:

+ Nó ẩn PlaceHolder tập trung và trả lại cho Blur

+ Hàm này phụ thuộc vào bộ chọn giữ chỗ, đầu tiên, nó chọn các thành phần có thuộc tính giữ chỗ, kích hoạt chức năng lấy nét và một chức năng khác làm mờ.

về trọng tâm: nó thêm một thuộc tính "dữ liệu văn bản" vào thành phần lấy giá trị của nó từ thuộc tính giữ chỗ, sau đó nó loại bỏ giá trị của thuộc tính giữ chỗ.

khi làm mờ: nó trả về giá trị giữ chỗ và xóa nó khỏi thuộc tính văn bản dữ liệu

<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', '');
  });
});

bạn có thể theo dõi tôi rất tốt nếu bạn nhìn những gì xảy ra đằng sau hậu trường bằng cách kiểm tra yếu tố đầu vào

Điều tương tự tôi đã áp dụng trong góc 5.

tôi đã tạo một chuỗi mới để lưu trữ giữ chỗ

newPlaceholder:string;

sau đó tôi đã sử dụng các chức năng lấy nét và làm mờ trên hộp đầu vào (tôi đang sử dụng tự động hoàn thành thủ tục).

Giữ chỗ trên đang được đặt từ bản thảo

Hai chức năng tôi đang sử dụng -

/* 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;
}

Không cần sử dụng bất kỳ CSS hoặc JQuery. Bạn có thể làm điều đó ngay từ thẻ đầu vào HTML.

Ví dụ: Trong hộp email bên dưới, văn bản giữ chỗ sẽ biến mất sau khi nhấp vào bên trong và văn bản sẽ xuất hiện lại nếu nhấp vào bên ngoài.

<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; }