खाली होने पर मैं HTML टेक्स्ट बॉक्स को एक संकेत कैसे दिखा सकता हूं?

Question

मैं अपने वेब पेज पर खोज बॉक्स को "इटैलिक" शब्द प्रदर्शित करना चाहता हूं। जब बॉक्स फोकस प्राप्त करता है, तो उसे खाली टेक्स्ट बॉक्स की तरह दिखना चाहिए। यदि इसमें पहले से ही पाठ है, तो इसे सामान्य रूप से पाठ (काला, गैर-इटैलिक) प्रदर्शित करना चाहिए। यह लेबल हटाने से अव्यवस्था से बचने में मेरी मदद करेगा।

BTW, यह एक ऑन-पेज अजाक्स खोज है, इसलिए इसमें कोई बटन नहीं है।

Comments

चूंकि प्रश्न पूछा गया था कि HTML5 प्लेसहोल्डर विशेषता सभी ब्राउज़रों द्वारा समर्थित हो गई है।

— 1

ओ माइकल। क्या आप इस पृष्ठ पर स्वीकृत उत्तर को बदलने के लिए तैयार हैं? एक स्पष्ट विजेता दिखता है, जो स्वीकृत उत्तर से अलग है।

— null

जावास्क्रिप्ट समाधान के साथ समस्या यह है कि हर कोई जावास्क्रिप्ट चालू नहीं है। प्लेसहोल्डर तब गायब नहीं होता है जब टेक्स्टबॉक्स फ़ोकस हो जाता है यदि ब्राउज़र प्लग-इन जैसे NoScript (डेवलपर्स के लिए बहुत आसान है) का उपयोग करना। प्लेसहोल्डर विकल्प सबसे मजबूत समाधान है।

— सेबलफॉस्ट

Answer 1

एक अन्य विकल्प, यदि आप केवल नए ब्राउज़रों के लिए यह सुविधा पाकर खुश हैं, तो HTML 5 के प्लेसहोल्डर विशेषता द्वारा दिए गए समर्थन का उपयोग करना है :

<input name="email" placeholder="Email Address">

किसी भी शैली के अभाव में, Chrome में यह दिखता है:

आप यहां और HTML5 प्लेसहोल्डर स्टाइलिंग में CSS के साथ डेमो की कोशिश कर सकते हैं ।

इस सुविधा की ब्राउज़र संगतता की जांच करना सुनिश्चित करें । फ़ायरफ़ॉक्स में समर्थन 3.7 में जोड़ा गया था। क्रोम ठीक है। Internet Explorer ने केवल 10 में समर्थन जोड़ा है। यदि आप किसी ऐसे ब्राउज़र को लक्षित करते हैं जो इनपुट प्लेसहोल्डर्स का समर्थन नहीं करता है, तो आप jQuery HTML5 प्लेसहोल्डर नामक jQuery प्लगइन का उपयोग कर सकते हैं , और फिर इसे सक्षम करने के लिए निम्न जावास्क्रिप्ट कोड जोड़ें।

$('input[placeholder], textarea[placeholder]').placeholder();

Comments

@ ड्यूक, यह Fx3.7 +, (सफारी / क्रोम) और ओपेरा में काम करता है। IE9 इसे समर्थन नहीं करता है, इसलिए मुझे लगता है कि IE8 या तो नहीं है।

— एलेसेंड्रो वर्म्यूलेन

हाँ मुझे आज ही पता चला कि FF3.6 इसका समर्थन नहीं करता है।

— ड्रू नॉक्स

मुझे लगता है कि यह फिर से चला गया है। मुझे यह यहाँ मिला: github.com/mathiasbynens/jquery-placeholder

— jocull

कैविट डेवलपर "इंटरनेट एक्सप्लोरर 10 और 11 क्षेत्र को केंद्रित करने पर प्लेसहोल्डर को नहीं दिखाता है, भले ही फ़ील्ड खाली हो।"

— कर्नल पैनिक

Answer 2

इसे टेक्स्टबॉक्स वॉटरमार्क के रूप में जाना जाता है, और यह जावास्क्रिप्ट के माध्यम से किया जाता है।

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

या यदि आप jQuery का उपयोग करते हैं, तो बेहतर तरीका:

• http://digitalbush.com/projects/watermark-input-plugin/
• या code.google.com/p/jquery-watermark

Comments

वह दूसरी कड़ी टूट गई है। यह समान हो सकता है: digitalbush.com/projects/watermark-input-plugin

— माइकल हरेन

एक और jQuery दृष्टिकोण मिला। इस परियोजना की मेजबानी @ code.google.com/p/jquery-watermark

— JP Hellemons

डिजिटलब्रश प्लगइन डेटाबेस में 'वॉटरमार्क' को बचाएगा। यह बीटा में है, और 2007 से अपडेट नहीं किया गया है। मैं @JP सुझाए गए अनुसार code.google.com/p/jquery-watermark का उपयोग करने के बजाय सलाह देता हूं ।

— किमबॉल रॉबिन्सन

मुझे लगता है कि प्रश्न के लेखक को वापस जाना चाहिए और @JP टिप्पणी को सर्वश्रेष्ठ उत्तर के रूप में चिह्नित करना चाहिए।

— रैंडी एल।

JQuery वॉटरमार्क प्लगइन बहुत अच्छा है क्योंकि यह उस मामले को नहीं संभालता है जहां इनपुट पहले से भरे हुए मूल्य के समान है। उस स्थिति में, यह आपके इनपुट टेक्स्ट को फिर से ग्रे बनाता है!

— 1:27 पर

Answer 3

आप प्लेसहोल्डर को HTML ( ब्राउज़र समर्थन ) में placeholderविशेषता का उपयोग करके सेट कर सकते हैं । और किया जा सकता है सीएसएस के साथ बदल (हालांकि ब्राउज़र समर्थन सीमित है)।font-stylecolor

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

Comments

इसके लिए देख रहा था, ता - आगे की जानकारी diveintohtml5.org/forms.html#placeholder

— डेविड येल

यह अब स्वीकृत उत्तर होना चाहिए। जब यह मूल रूप से 2010 में पोस्ट किया गया था, तो प्लेसहोल्डर विशेषता का व्यापक रूप से समर्थन नहीं किया जा सकता था, लेकिन अब यह IE8 को छोड़कर सभी वर्तमान ब्राउज़रों द्वारा समर्थित है।

— JSP64

Answer 4

आप जोड़ सकते हैं और एक विशेष सीएसएस वर्ग को हटाने और इनपुट मूल्य संशोधित कर सकते हैं onfocus/ onblurजावास्क्रिप्ट के साथ:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

उदाहरण के लिए अपने CSS में स्टाइल के साथ एक संकेत वर्ग निर्दिष्ट करें :

input.hint {
    color: grey;
}

Comments

मैंने एक उत्तर पोस्ट किया है जो एक ही काम करता है लेकिन एक अधिक सुविधाजनक और बनाए रखने योग्य तरीके से: stackoverflow.com/questions/108207/…

— ड्रू नोक

Answer 5

सबसे अच्छा तरीका है कि jQuery या YUI जैसी किसी तरह की जावास्क्रिप्ट लाइब्रेरी का उपयोग करके अपने जावास्क्रिप्ट इवेंट्स को वायर करें और अपने कोड को बाहरी .js-file में डालें।

लेकिन अगर आप एक त्वरित और गंदा समाधान चाहते हैं तो यह आपका इनलाइन HTML- समाधान है:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

अपडेट किया गया : अनुरोधित रंग-सामान जोड़ा गया।

Comments

यह खोजों के लिए ठीक है, लेकिन कई मामलों में आप नहीं चाहते कि वॉटरमार्क किसी भी सबमिट ईवेंट पर सबमिट किया जाए।

— किमबॉल रॉबिन्सन

@ k.robinson I +1 का कथन है। यह उस समय का सबसे तेज और सबसे कॉम्पैक्ट कोड था। इसे एक जावास्क्रिप्ट कोड-ब्लॉक के साथ और अधिक बारीक-बारीक हल किया जा सकता है।

— सेब निल्सन

Answer 6

मैंने कुछ समय पहले अपनी वेबसाइट पर इसके लिए एक समाधान पोस्ट किया था। इसका उपयोग करने के लिए, एक .jsफ़ाइल आयात करें :

<script type="text/javascript" src="/hint-textbox.js"></script>

फिर आप सीएसएस वर्ग के साथ जो भी संकेत देना चाहते हैं, उसका एनोटेट करें hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

अधिक जानकारी और उदाहरण यहां उपलब्ध हैं ।

Comments

लेकिन यह टूट गया है। यदि मैं उसी पाठ को इनपुट करता हूं जो संकेत था, तो यह व्यवहार करता है जैसे कि कोई इनपुट नहीं दिया गया था (यदि मैं इसमें टैब करता हूं और फिर से बाहर निकलता हूं)

— Stephan Eggermont

@ स्टेफ़न: हाँ यह एकमात्र कैवेट है जिसे मैं जानता हूँ। क्या आपने वास्तव में पाया है कि व्यवहार में एक मुद्दा है? यदि ऐसा है तो आपको ऊपर दिए गए एक विभाग की जाँच और उसे छुपाने / छिपाने की जाँच करनी पड़ सकती है। यह सबसे सरल उपाय है, जिसके बारे में मुझे पता है। यदि जावास्क्रिप्ट अक्षम है तो मैं भी अच्छी तरह से नीचा दिखाता हूं।

— ड्रू नोक

मुझे मूल्य की सेटिंग से ट्रिगर किया गया था। मेरे पास मौजूदा या डिफ़ॉल्ट मूल्य और पाठ बॉक्स खाली होने पर एक संकेत के साथ पूर्व-भरने की एक संयुक्त आवश्यकता है

— Stephan Eggermont

@ स्टेफ़न - मैं वास्तव में इसके लिए आज की जरूरत पर आया हूं और jQuery प्लगइन्स को देख रहा हूं। स्वीकार किए गए उत्तर में जुड़ा हुआ एक ही समस्या से ग्रस्त है जो मेरा करता है। क्या आप एक विकल्प के बारे में जानते हैं?

— ड्रू नोक

Answer 7

यहां Google Ajax लाइब्रेरी कैश और कुछ jQuery जादू के साथ एक कार्यात्मक उदाहरण है।

यह सीएसएस होगा:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

यह जावास्क्रिप्ट कोड होगा:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

और यह HTML होगा:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

मुझे आशा है कि यह GAJAXLibs और jQuery दोनों में आपकी रुचि बनाने के लिए पर्याप्त है।

Answer 8

अब यह बहुत आसान हो गया। Html में हम इनपुट तत्वों के लिए प्लेसहोल्डर विशेषता दे सकते हैं।

जैसे

<input type="text" name="fst_name" placeholder="First Name"/>

अधिक जानकारी के लिए जाँच करें: http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 9

JQuery के उपयोगकर्ताओं के लिए: naspinski का jQuery लिंक टूटा हुआ लगता है, लेकिन इसे आज़माएं: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

आपको बोनस के रूप में एक मुफ्त jQuery प्लगइन ट्यूटोरियल मिलता है। :)

Comments

मैं tripfootprint.com पर रेमी के प्लगइन का उपयोग करता हूं और यह बहुत अच्छा काम करता है; मुझे लगता है कि यह काफी आसान है कि साथ चलना और टटोलना है।

— 23

Answer 10

मैंने jQuery प्लगइन jQuery वॉटरमार्क को शीर्ष उत्तर में सूचीबद्ध एक से बेहतर पाया । बेहतर क्यों? क्योंकि यह पासवर्ड इनपुट फ़ील्ड का समर्थन करता है। इसके अलावा, वॉटरमार्क (या अन्य विशेषताओं) का रंग सेट करना .watermarkआपके सीएसएस फ़ाइल में एक संदर्भ बनाने के रूप में आसान है ।

Answer 11

इसे "वॉटरमार्क" कहा जाता है।

मैंने jQuery प्लगइन jQuery वॉटरमार्क पाया , जो पहले उत्तर के विपरीत, अतिरिक्त सेटअप की आवश्यकता नहीं है (मूल उत्तर को फॉर्म सबमिट करने से पहले एक विशेष कॉल की भी आवश्यकता होती है)।

Answer 12

JQuery फॉर्म नोटिफ़ायर का उपयोग करें - यह सबसे लोकप्रिय jQuery प्लगइन्स में से एक है और बग से पीड़ित नहीं है कुछ अन्य jQuery के सुझाव यहाँ हैं (उदाहरण के लिए, आप स्वतंत्र रूप से वॉटरमार्क को स्टाइल कर सकते हैं, बिना यह चिंता किए कि क्या इसे बचाया जाएगा। डेटाबेस)।

jQuery वॉटरमार्क फॉर्म तत्वों पर सीधे एक सीएसएस शैली का उपयोग करता है (मैंने देखा कि वॉटरमार्क पर लागू सीएसएस फ़ॉन्ट-आकार के गुणों ने टेक्स्ट बॉक्स को भी प्रभावित किया है - मैं जो चाहता था)। JQuery वॉटरमार्क के साथ प्लस आप फ़ील्ड में पाठ को ड्रॉप-ड्रॉप कर सकते हैं (jQuery फॉर्म नोटिफ़ायर इसकी अनुमति नहीं देता है)।

कुछ अन्य लोगों द्वारा सुझाया गया एक (digitalbrush.com पर एक), गलती से वॉटरमार्क मूल्य आपके फॉर्म में जमा कर देगा, इसलिए मैं इसके खिलाफ दृढ़ता से सलाह देता हूं।

Answer 13

पाठ को रेंडर करने के लिए एक पृष्ठभूमि छवि का उपयोग करें:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

फिर आपको value == 0केवल सही वर्ग का पता लगाना और लागू करना है :

 <input class="foo fooempty" value="" type="text" name="bar" />

और jQuery जावास्क्रिप्ट कोड इस तरह दिखता है:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Answer 14

आप आसानी से एक बॉक्स "खोज" पढ़ सकते हैं, फिर जब फोकस को बदल दिया जाता है तो पाठ हटा दिया जाता है। कुछ इस तरह:

<input onfocus="this.value=''" type="text" value="Search" />

यदि आप ऐसा करते हैं तो निश्चित रूप से उपयोगकर्ता का अपना पाठ गायब हो जाएगा। तो आप शायद कुछ अधिक मजबूत उपयोग करना चाहते हैं:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

Answer 15

जब पृष्ठ पहली बार लोड होता है, तो टेक्स्ट बॉक्स में खोज प्रकट होती है, यदि आप चाहते हैं कि यह ग्रे है।

जब इनपुट बॉक्स फोकस प्राप्त करता है, तो खोज बॉक्स में सभी पाठ का चयन करें ताकि उपयोगकर्ता बस लिखना शुरू कर सके, जो प्रक्रिया में चयनित पाठ को हटा देगा। यह भी अच्छी तरह से काम करेगा अगर उपयोगकर्ता दूसरी बार खोज बॉक्स का उपयोग करना चाहता है क्योंकि उन्हें इसे हटाने के लिए पिछले पाठ को मैन्युअल रूप से उजागर नहीं करना होगा।

<input type="text" value="Search" onfocus="this.select();" />

Answer 16

मुझे "ज्ञान चिकूस" का समाधान पसंद है - सरल और स्पष्ट। केवल पृष्ठ लोड तैयार होने पर धब्बा के लिए एक कॉल जोड़ने की आवश्यकता है जो प्रारंभिक स्थिति सेट करेगा:

$('input[value="text"]').blur();

Answer 17

आप इस तरह से onfocus करने के लिए कुछ असाइन करना चाहते हैं:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

और इस onblur:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(यदि आप चाहें तो क्लासनाम स्विचिंग करने के लिए आप फ्रेमवर्क फ़ंक्शन की तरह कुछ चतुर का उपयोग कर सकते हैं।)

इस तरह से कुछ सीएसएस के साथ:

input.placeholder{
    color: gray;
    font-style: italic;
}

Answer 18

मैं एक सरल, एक लाइन जावास्क्रिप्ट सॉल्यूशन का उपयोग कर रहा हूं जो बहुत अच्छा काम करता है। यहाँ टेक्स्टबॉक्स के लिए और textarea के लिए एक उदाहरण है:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

केवल "नकारात्मक पक्ष" क्षेत्र के मूल्य के साथ कुछ भी करने से पहले $ _POST या जावास्क्रिप्ट सत्यापन में मान्य करना है। मतलब, यह जाँचना कि क्षेत्र का मान "पाठ" नहीं है।

Answer 19

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

Answer 20

सरल एचटीएमएल 'आवश्यक' टैग उपयोगी है।

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

यह निर्दिष्ट करता है कि फॉर्म सबमिट करने से पहले एक इनपुट फ़ील्ड भरना होगा या बटन सबमिट दबाएं। यहाँ उदाहरण है

Comments

जबकि यह उपयोगी है, इसका सवाल से कोई लेना-देना नहीं है।

— क्वेंटिन

Answer 21

से प्रयोक्ता AJAXToolkit http://asp.net