जावास्क्रिप्ट टेक्स्ट इनपुट फ़ील्ड्स जो निर्देश (प्लेसहोल्डर) टेक्स्ट प्रदर्शित करते हैं

Question

टेक्स्ट इनपुट फ़ील्ड रखने का सबसे अच्छा तरीका क्या है जो ग्रे में उस फ़ील्ड में प्रवेश करने के निर्देशों को प्रदर्शित करता है। जब आप उस इनपुट फ़ील्ड पर फ़ोकस करते हैं, तो ग्रे निर्देश टेक्स्ट गायब हो जाता है और आपका इनपुट टेक्स्ट काला दिखाई देता है। यदि आप अपना इनपुट टेक्स्ट मिटते हैं और उस इनपुट से दूर फोकस करते हैं, तो निर्देश ग्रे टेक्स्ट फिर से दिखाई देता है।

मैंने इसे jQuery के साथ कार्यान्वित करने का प्रयास किया है, लेकिन मुझे विभिन्न ब्राउज़रों के साथ सभी प्रकार के अजीब समस्याएं मिलती हैं। कभी-कभी जब आप एक स्क्रीन वापस जाते हैं, तो निर्देश पाठ काला हो जाता है और अब गायब नहीं होता है, इस तरह के मुद्दे।

क्या इसके लिए मानक जावास्क्रिप्ट लाइब्रेरी है? मुझे कोई नहीं मिला!

ओह, और निर्देश पाठ एक छवि नहीं हो सकता है क्योंकि इसे ब्राउज़र की भाषा वरीयता के आधार पर अलग-अलग भाषाओं में उपलब्ध होना चाहिए।

Answer 1

आप this लिंक jquery.use में वॉटरमार्क प्लगइन का उपयोग कर सकते हैं (आप बस लेबल और विभिन्न अग्रभूमि रंग के साथ इनपुट शैली की जरूरत है)।

उदाहरण

$(this).Watermark("your instructions"); 

Answer 2

<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''"> 

Answer 3

इनपुट पारदर्शी बनाएं और टेक्स्ट को इसके पीछे रखें। मान ऑनलोड की जांच करें, यह तय करने के लिए कि क्या टेक्स्ट दिखाना चाहिए या नहीं। इसे अदृश्य ऑनफोकस बनाएं।

उदाहरण के लिए: http://dorward.me.uk/tmp/label-work/example.html

Answer 4

एचटीएमएल

<input type="text" id="user" class="textbox default" value="Enter login name"> 
<input type="password" id="pass" class="textbox"> 

jQuery

$(function(){ 
    $('.textbox').focus(function(){ 
    if (this.value == this.defaultValue) { 
     this.value = ''; 
     $(this).removeClass('default'); 
    }; 
    }).blur(function(){ 
    if (this.value == '') { 
     this.value = this.defaultValue; 
     $(this).addClass('default'); 
    }; 
    });​ 
}); 

demo

Answer 5

इस एक पर देखो: http://fuelyourcoding.com/scripts/infield/

Answer 6

आपको इसके लिए जावास्क्रिप्ट की आवश्यकता नहीं है।

एचटीएमएल 5:

<input type="text" id="email" name="email" placeholder="Enter your email address"> 

इस आधुनिक ब्राउज़रों में काम करता है। यदि आप अपने पेज पर modernizr.js जोड़ते हैं तो यह सभी ब्राउज़रों में काम करेगा।

Answer 7

प्लेसहोल्डर कोड - नाम चर का

नाम, है

var name=$("#con-name"); 
var nameval="Enter your name"; 



name.val(nameval); 
name.focus(function(){ 
    if (this.value == nameval) { 
     this.value = ''; 
    }; 
    }).blur(function(){ 
     if (this.value == '') {  
     this.value = nameval; 
    }; 
}); 
//submit to clear code 
$("#sub_con_page").click(function() { 
    if(name.val()==nameval) { 
     name.val(""); 
    } 
}); 

DEMO LINK