मैं css या jquery का उपयोग करके फ़ोकस करने वाले प्लेसहोल्डर टेक्स्ट को कैसे छिपा सकता हूँ?

Question

यह क्रोम को छोड़कर प्रत्येक ब्राउज़र के लिए स्वचालित रूप से किया जाता है ।

मैं अनुमान लगा रहा हूं कि मुझे विशेष रूप से Chrome को लक्षित करना है ।

कोई उपाय?

यदि CSS के साथ नहीं है , तो jQuery के साथ ?

सधन्यवाद।

Comments

मेरे संपादन के बाद सीहॉक करें, इससे मदद मिल सकती है

— टोनी मिशेल क्यूबेट

ओपेरा एक अन्य ब्राउज़र भी है जो प्लेसहोल्डर को फोकस पर हटा देता है।

— लुकास

संस्करण 15 के रूप में फ़ायरफ़ॉक्स अब प्लेसहोल्डर टेक्स्ट को तब तक नहीं हटाता है जब तक आप टाइप करना शुरू नहीं करते हैं। मेरा मानना ​​है कि IE10 के लिए भी ऐसा ही हो सकता है लेकिन मेरे पास इसे सत्यापित करने का कोई तरीका नहीं है।

— रोब फ्लेचर

मुझे चिंता है कि किसी ने भी इस तथ्य का उल्लेख नहीं किया है कि आपको देशी ब्राउज़र व्यवहार को संशोधित करने में परेशान नहीं करना चाहिए। मैं पसंद करता हूं कि प्लेसहोल्डर मौजूद रहे। यह सिर्फ एक अंतिम उपयोगकर्ता के रूप में मेरी मदद करता है, और यह एक विशेषता है कि ब्राउज़र अब लागू करना शुरू कर रहे हैं ... शायद क्योंकि गायब-पर-केंद्रित व्यवहार एक प्रयोज्य समस्या साबित हुई। ब्राउजर को रहने दीजिए।

— रयान व्हेल

"यह क्रोम को छोड़कर प्रत्येक ब्राउज़र के लिए स्वचालित रूप से किया जाता है।" अब और नहीं? मैंने अभी फ़ायरफ़ॉक्स 37.0.2, सफारी 7.1.5 और क्रोम 42.0 में OSX पर यह कोशिश की है। जब तक मैं टाइप करना शुरू नहीं करता, उनमें से कोई भी प्लेसहोल्डर टेक्स्ट को नहीं हटाता है, और जब मैं मैदान को खाली करता हूं तो वे सभी इसे वापस रख देते हैं।

— नाथन लॉन्ग

Answer 1

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

Comments

इससे यह हो जाता है लेकिन जब मैं मैदान से दूर रहता हूं तो यह खाली रहता है।

— लंदनग्यू

@ लंदनगू: बस मेरी पोस्ट को संपादित किया है, देखें कि क्या यह वैसा ही काम करता है जैसा आप चाहते थे। लेकिन टोनी मिशेल क्यूबेट समाधान अच्छे हैं

— मट्टूडुक

यहाँ समस्या यह है कि आपत्तिजनक जावास्क्रिप्ट है। टोनी मिशेल क्यूबेट का समाधान बेहतर है।

— सिल्कस्टर

मुझे यह पसंद है, लेकिन दुर्भाग्य से यह न तो IE और न ही सफारी काम नहीं करता है।

— मोहम्मद मुस्तफा

काम नहीं कर रहा। stackblitz.com/edit/angular-jd2l6y-frudzk?file=app/…

— इसका मुझे

Answer 2

संपादित करें: सभी ब्राउज़र अब समर्थन करते हैं

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

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

फ़ायरफ़ॉक्स 15 और IE 10+ भी अब इसका समर्थन करता है। केसी चू के सीएसएस समाधान पर विस्तार करने के लिए :

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

Comments

बहुत बढ़िया जवाब! मुझे HTML5 के पक्ष में अपने पुराने jQuery समाधान को छोड़ने में ज्यादा समझदारी नहीं है और फिर ठीक आगे बढ़ो और एक फिक्स के रूप में जावास्क्रिप्ट को वापस जोड़ें। यह सिर्फ वह उपाय है जिसकी मुझे तलाश थी।

— नीनेन

@MartinHunt क्या आपने एफएफ पर यह कोशिश की है? इनपुट: फोकस :: - मोज-प्लेसहोल्डर

— फिलिप

पुराने धागे को हटाने के लिए क्षमा याचना, लेकिन इसे और अधिक पूर्ण बनाने के लिए: इनपुट: फ़ोकस: -मोज़-प्लेसहोल्डर फ़ायरफ़ॉक्स 18 और नीचे के लिए है, 19 के लिए आपको इसके बाद उपयोग करने की आवश्यकता है: इनपुट: फोकस :: - मोज-प्लेसहोल्डर (नोट डबल कोलन)। Ref: css-tricks.com/snippets/css/style-placeholder-text

— पीटर लुईस

यह टिप्पणी एक जीत है। गतिशील नियंत्रण के साथ भी काम करता है, केन्डो तरह

— reflog

मुझसे भी बढ़िया जवाब! हममें से जिन लोगों को इस कार्यक्षमता की आवश्यकता हो सकती है, जब फ़ील्ड को यहाँ अक्षम किया गया है, तो CSS कोड है: / * प्लेसहोल्डर टेक्स्ट को छिपाना (यदि कोई हो), जब होल्डिंग फ़ील्ड अक्षम हो जाती है * / इनपुट: अक्षम :: - webkit-input- प्लेसहोल्डर {रंग: पारदर्शी; } इनपुट: अक्षम: -मोज़-प्लेसहोल्डर {रंग: पारदर्शी; } इनपुट: अक्षम :: - मोज-प्लेसहोल्डर {रंग: पारदर्शी; } इनपुट: अक्षम: -ms-input-प्लेसहोल्डर {color: पारदर्शी; }

— रमनगोम

Answer 3

यहाँ एक CSS-only समाधान है (अभी के लिए, केवल WebKit में काम करता है):

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

Comments

मुझे यह उत्तर पसंद है, लेकिन अभी इसके लिए ब्राउज़र समर्थन नहीं है।

— जेरी

Answer 4

शुद्ध सीएसएस समाधान (जेएस की आवश्यकता नहीं)

@ हेक्सोडस और @ कैसी चू के उत्तरों पर आधारित, यहां एक अद्यतन और क्रॉस-ब्राउज़र समाधान है जो प्लेसहोल्डर पाठ को फीका करने के लिए सीएसएस अस्पष्टता और संक्रमण का लाभ उठाता है। यह किसी भी तत्व के लिए काम करता है जो प्लेसहोल्डर्स, सहित 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 */

संपादित करें: आधुनिक ब्राउज़रों का समर्थन करने के लिए अपडेट किया गया।

Comments

सबसे अच्छा सीएसएस समाधान!

— फतह सराय

अच्छा पुराने सीएसएस ... महान सरल समाधान! मैंने ऐसा क्यों नहीं सोचा ??

— जेआई-वेब

Answer 5

क्या आपने प्लेसहोल्डर अटर की कोशिश की है?

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

दरअसल, चूंकि प्लेसहोल्डर का उपयोग मूल्य का वर्णन करने के लिए किया जाना चाहिए, न कि इनपुट के नाम पर। मैं निम्नलिखित विकल्प सुझाता हूं

एचटीएमएल:

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

जावास्क्रिप्ट:

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

सीएसएस:

.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/

Comments

डेटा विशेषता का उपयोग करते हुए देखकर अच्छा लगा। लेकिन मैं सीएसएस समकक्ष को देखूंगा। जब कैश किया जाता है तो यह एक तेज़ समाधान होगा और वैश्विक हो सकता है। ऊपर दिए गए डेटा विशेषता को आवश्यक हर तत्व पर रखा जाना चाहिए। (नीचे उत्तर)

— नील

यह अधूरा है। बहुत कम कोड के साथ किया जा सकता है।

— जीलार्डो

@ जेगार्डो ने मुझे प्रकाश दिखाया (लेकिन मुझे यकीन नहीं है कि अगर आपने देखा है कि 3 अलग-अलग समाधान हैं)

— टोनी मिशेल क्यूबेट

Answer 6

@ केसी-चू और समुद्री डाकू लूट के जवाब को बढ़ाने के लिए, यहां एक अधिक क्रॉस ब्राउज़र संगत तरीका है:

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

Comments

बिल्कुल वही जो मैंने अभी लिखा है (इसके बजाय मैंने प्रयोग किया है opacity:0;)! सभी संभव ब्राउज़र समर्थन के साथ इस धागे में एकमात्र सीएसएस समाधान!

— ReynekeVosz

Answer 7

टोनी का जवाब अच्छा है, लेकिन मैं इसके बजाय 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'));
    });
})

डेमो।

Comments

यदि आपके पास एक से अधिक फ़ील्ड हैं, तो यह काम नहीं करता है। यहाँ आपके कोड का वर्धित संस्करण jsfiddle.net/6CzRq/64

— svlada

Answer 8

मुझे नाम स्थान में इसे पैकेज करना और "प्लेसहोल्डर" विशेषता के साथ तत्वों पर चलाना पसंद है ...

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

Answer 9

कभी-कभी आपको यह सुनिश्चित करने के लिए विशिष्टता की आवश्यकता होती है कि आपकी शैलियों को सबसे मजबूत कारक 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;
    }

Answer 10

प्योर सीएसएस के साथ इसने मेरे लिए काम किया। इनपुट में दर्ज / फ़ोकस होने पर इसे पारदर्शी बनाएं

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

Answer 11

आगे वालेस सिधारे के कोड नमूने को परिष्कृत करने के लिए :

$(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 में यहां एक कार्यशील उदाहरण देखें ।

Answer 12

मुझे संक्रमण के साथ सीएसएस दृष्टिकोण पसंद है। फोकस पर प्लेसहोल्डर फीका हो जाता है;) टेक्स्टारिस के लिए भी काम करता है।

महान विचार के लिए @Casey चू धन्यवाद।

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

Answer 13

Http://bourbon.io/ के साथ SCSS का उपयोग करते हुए , यह समाधान सरल, सुरुचिपूर्ण और सभी वेब ब्राउज़र पर काम करता है:

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

Bourbon का उपयोग करें! यह आपके लिये अच्छा हॆ !

Answer 14

सीएसएस के इस टुकड़े ने मेरे लिए काम किया:

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

}

Comments

यह JQuery के बिना यह करने का एक अच्छा तरीका है :)

— तेहएक्स

Answer 15

शुद्ध सीएसएस आधारित समाधान के लिए:

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

नोट: सभी ब्राउज़र विक्रेताओं द्वारा अभी तक समर्थित नहीं है।

संदर्भ: Ilia Raiskin द्वारा सीएसएस के साथ फोकस पर प्लेसहोल्डर पाठ छिपाएँ।

Answer 16

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

Comments

यह केवल एक इनपुट मानता है।

— nym

Answer 17

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

Answer 18

डेमो यहाँ है: 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'));
            });

        });

}

Comments

$ ("इनपुट [प्लेसहोल्डर]") के बजाय केवल उन फ़ील्ड्स का चयन करें जिनके पास प्लेसहोल्डर विशेषता है।

— सिल्कस्टर

यह सबसे अच्छा जवाब है, सरल है, और ध्यान से बाहर होने पर दूसरों को रद्द कर देता है

— JGallardo

Answer 19

इनपुट के लिए

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

बनावट के लिए

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

Answer 20

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

Answer 21

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

Answer 22

उपरोक्त सभी के अलावा, मेरे पास दो विचार हैं।

आप एक तत्व को जोड़ सकते हैं जो कि पालकी धारक की नकल करता है। फिर जावास्क्रिप्ट का उपयोग करके दिखाने और छिपने वाले तत्व को नियंत्रित करता है।

लेकिन यह इतना जटिल है, दूसरा भाई इस तरह से css.Just के भाई के चयनकर्ता का उपयोग कर रहा है:

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

23333, मेरे पास एक खराब अंग्रेजी है। आपकी समस्या का समाधान होगा।

Comments

कृपया इस URL की जाँच करें यह आपकी सामग्री की गुणवत्ता को ऊपर उठाने के लिए उपयोगी होगा;

— विली चेंग

Answer 23

इस फ़ंक्शन का प्रयास करें:

+ यह फोकस पर प्लेसहोल्डर छुपाता है और इसे वापस ब्लर पर लौटाता है

+ यह फ़ंक्शन प्लेसहोल्डर चयनकर्ता पर निर्भर करता है, पहले यह प्लेसहोल्डर विशेषता के साथ तत्वों का चयन करता है, फ़ोकसिंग पर एक फ़ंक्शन को ट्रिगर करता है और ब्लरिंग पर एक अन्य।

फ़ोकस पर: यह एक विशेषता "डेटा-टेक्स्ट" को उस तत्व में जोड़ता है जो प्लेसहोल्डर विशेषता से अपना मान प्राप्त करता है फिर यह प्लेसहोल्डर विशेषता के मूल्य को हटा देता है।

धुंधला होने पर: यह प्लेसहोल्डर मान को वापस करता है और इसे डेटा-टेक्स्ट विशेषता से हटा देता है

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

यदि आप देखते हैं कि इनपुट तत्व का निरीक्षण करके पर्दे के पीछे क्या हो रहा है, तो आप मुझे अच्छी तरह से फॉलो कर सकते हैं

Answer 24

यही बात मैंने कोणीय 5 में लागू की है।

मैंने प्लेसहोल्डर के भंडारण के लिए एक नई स्ट्रिंग बनाई

newPlaceholder:string;

तब मैंने इनपुट बॉक्स पर फ़ोकस और ब्लर फ़ंक्शंस का उपयोग किया है (मैं प्राइम एनसी ऑटोकॉम्पेल का उपयोग कर रहा हूं)।

टाइप प्लेसहोल्डर से ऊपर प्लेसहोल्डर सेट किया जा रहा है

दो कार्य जो मैं उपयोग कर रहा हूं -

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

Answer 25

किसी भी CSS या JQuery का उपयोग करने की आवश्यकता नहीं है। आप इसे HTML इनपुट टैग से ठीक कर सकते हैं।

उदाहरण के लिए , नीचे ईमेल बॉक्स में, प्लेसहोल्डर पाठ अंदर क्लिक करने के बाद गायब हो जाएगा और पाठ फिर से दिखाई देगा यदि बाहर क्लिक किया गया है।

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

Answer 26

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

Comments

यह उत्तर पिछले उत्तर के समान है। यदि आपके पास जोड़ने या सुधारने के लिए कुछ है, तो कृपया मूल उत्तर को संपादित करने का सुझाव दें।

— JonathanDavidArndt