जावास्क्रिप्ट के साथ <textarea> समाशोधन?

मुझे कुछ <textarea>Welcome, click here to type.</textarea>जावास्क्रिप्ट के साथ <textarea> समाशोधन?

कुछ ऐसा करना होगा, जब स्पष्ट रूप से उपयोगकर्ता टेक्स्ट क्षेत्र पर क्लिक करता है तो स्पष्ट करें।

लेकिन।

इससे पहले कि किसी को भी उल्लेख है इस साइट पर इस सवाल के डुप्लिकेट देखते हैं कि पहले से ही वहाँ अन्य जानकारी है कि जवाब में उल्लेख नहीं कर रहे हैं। उदाहरण के लिए:

मैंने देखा है कि यह <textarea>onclick() बिना और केवल एक <textarea id="someid"> होने स्पष्ट करने के लिए संभव है। मुझे नहीं पता कि उन्होंने यह कैसे किया, मैं यह करना चाहता हूं। न केवल मुझे अपने कोड को साफ करना पसंद है, लेकिन मैं जानना चाहता हूं कि यह कैसे संभव था। (मैं onClick() सोच रहा हूँ किसी भी तरह <head><script type="text/javascript"></script></head> अंदर जा रहा है?)

मैं भी <textarea> नहीं करने के लिए स्पष्ट करना चाहता हूँ एक बार किसी को फिर से पाठ क्षेत्र पर कुछ और ही क्लिक टाइप किया गया है। i.e. जब उपयोगकर्ता दर्ज टेक्स्ट के एक निश्चित हिस्से को संपादित करने के लिए फिर से टेक्स्ट क्षेत्र पर क्लिक करता है।

मैं बहुत जावास्क्रिप्ट पता नहीं है, लेकिन इस तरह से मैं यह काम करते हुए देखना है:

<textarea> मूल्य Welcome, click here to type से मेल खाता है; जब उपयोगकर्ता टेक्स्ट क्षेत्र में क्लिक करता है तो उसे टेक्स्ट को साफ़ करना चाहिए।
यदि <textarea> खाली है और अब ध्यान केंद्रित नहीं किया गया है तो इसे फिर से मानना चाहिए "Welcome, click here to type."।

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

मेरी मदद करने के लिए अग्रिम धन्यवाद! इस मामले पर आपका ज्ञान बहुत सराहना की जाएगी। :)

स्रोत

2010-09-09 Tek

<head> में, आपको निम्न कर सकता है:

<script type="text/javascript"> 
    var textAreaDefaultText = "Welcome, click here to type."; 

    function textAreaFocus(textarea) { 
     if (textarea.value == textAreaDefaultText) { 
      textarea.value = ""; 
     } 
    } 

    function textAreaBlur(textarea) { 
     if (textarea.value == "") { 
      textarea.value = textAreaDefaultText; 
     } 
    } 

    window.onload = function() { 
     var textarea = document.getElementById("your_textarea_id"); 
     textarea.onfocus = function() { textAreaFocus(this); }; 
     textarea.onblur = function() { textAreaBlur(this); }; 
    }; 
</script>

में इस उदाहरण के बजाय, इवेंट हैंडलर विशेषताओं का उपयोग करने में एक अलग फायदा है (हालांकि आपके मार्कअप के साथ मिश्रित स्क्रिप्ट की कीमत पर, जो कि आम तौर पर विभिन्न कारणों से अनुशंसित नहीं है, जिनमें से प्रमुख चिंताओं को अलग करता है): कोड तब काम करेगा जैसे ही textarea rendere है डी, जबकि उपरोक्त विधि के साथ, यदि उपयोगकर्ता शेष दस्तावेज़ लोड होने से पहले टेक्स्टरेरा पर क्लिक करता है, तो ईवेंट हैंडलर नहीं बनाया जाएगा और कुछ नहीं होगा।

<textarea id="your_textarea_id" 
    onfocus="textAreaFocus(this)" 
    onblur="textAreaBlur(this)">Welcome, click here to type.</textarea>

स्रोत

2010-09-09 11:50:18

मुझे नहीं लगता कि एक "विशिष्ट लाभ है करते हैं "यहां, जब तक कि पृष्ठ असाधारण रूप से धीरे-धीरे लोड नहीं हो जाता है या पृष्ठ UI के एक महत्वपूर्ण भाग के रूप में इसकी आवश्यकता नहीं होती है (मैं खोज इंजन सोच रहा हूं, हालांकि उनके पास डिफ़ॉल्ट रूप से इनपुट इनपुट नहीं होगा?), निश्चित रूप से इनलाइन घटनाओं का उपयोग करने की तुलना नहीं की जाती है। –

यह निर्विवाद रूप से एक फायदा है, तो मैं अपनी बात नहीं दिख रहा है। तथ्य यह है कि आप मार्कअप के साथ मिश्रित स्क्रिप्ट के साथ खत्म यकीनन एक नुकसान है, जो मैं इस बात का खंडन नहीं कर रहा हूँ है। मैं निष्पक्ष दोनों विकल्प प्रस्तुत किया, इसलिए मुझे नहीं पता लगता है कि एक downvote warranted था –

एर्म .... कोई downvote आप कहाँ से मिली कि –

area = document.getElementById('someid'); 
area.onfocus = function() { 
    if (area.value == 'DEFAULT VALUE HERE') area.value = ''; 
};

वैसे, focus क्योंकि यह क्लिक करके कवर के साथ-साथ कुंजीपटल, ध्यान का एक और रूप का प्रयोग करने में टैब click से बेहतर है।

स्रोत

2010-09-09 11:25:41

अच्छा बिंदु, +1: इसलिए अगर आप अपने मार्कअप में एक छोटे से स्क्रिप्ट होने से परहेज नहीं करते, window.onload हिस्सा छोड़ने और बजाय कर रही सलाह देते हैं। लेकिन आह ... जहां मैं दस्तावेज़ में इस स्निपेट रखूँगा ताकि यह काम करे? –

एक अतिरिक्त (वैकल्पिक) विचार के रूप में, पूर्व-परिभाषित स्ट्रिंग के बजाय 'area.defaultValue' के विरुद्ध जांचना संभव होना चाहिए। लेकिन वह विभाजित बाल है। –

'आंतरिक HTML' फ़ील्ड 'मान' नहीं लाता है, यह बग के कारण आईई को छोड़कर, फ़ील्ड की मूल सामग्री को दर्शाता है जो' डिफ़ॉल्ट वैल्यू 'है। फॉर्म फ़ील्ड पर 'innerHTML' या' getAttribute ('value') 'का उपयोग न करें क्योंकि यह आपके द्वारा किए गए कार्यों को नहीं करेगा। इसके बजाए, जैसा कि पेक्का बताता है, 'area.value' की तुलना' area.defaultValue' से करें। – bobince

onclick="foobar"bind event handlers के लिए केवल एक ही रास्ता है। एचटीएमएल के साथ जावास्क्रिप्ट बाइंडिंग को मिश्रित करने के बजाय जावास्क्रिप्ट में पूरी तरह से ईवेंट हैंडलर को बाध्य करने के लिए यह सामान्य (सर्वोत्तम?) अभ्यास है। (प्रदान किया गया लिंक यह सुनिश्चित करने के लिए सर्वोत्तम प्रथाओं को प्रदान नहीं करता है कि आपको आवश्यक डीओएम ऑब्जेक्ट्स में हेरफेर करने के लिए उपलब्ध हैं। हालांकि, सीखने के लिए, यह पर्याप्त है, और जब आप जावास्क्रिप्ट ढांचे का उपयोग करने के लिए आगे बढ़ते हैं, तो यह आपके लिए संभाला जाएगा (अन्य चीजों के साथ, ब्राउज़र विसंगतियों के अलावा))।

इसके अलावा, आप, click घटना के बजाय focus घटना के लिए जाँच करने के लिए चाहते हो सकता है के रूप में है कि करने के लिए टैब किए जा रहा है की तरह अन्य मामलों को संभालती है।

स्रोत

2010-09-09 11:26:10 strager

सबसे पहले, यदि आपकी साइट के उपयोगकर्ता आधुनिक वेब ब्राउज़र का उपयोग कर रहे हैं, तो प्लेसहोल्डर नामक एक अपेक्षाकृत नई सुविधा है जो आप मुफ्त में कर सकते हैं - यानी कोई अतिरिक्त कोड आवश्यक नहीं है।

<textarea name="mytextfield" placeholder="Click here to type"></textarea>

हालांकि, जैसा कि मैंने कहा, यह केवल अपेक्षाकृत नए ब्राउज़र में काम करता है; पुराने ब्राउज़र इसे अनदेखा करेंगे। क्षेत्र अभी भी सही तरीके से काम करेगा, इसलिए आप इसे पुराने ब्राउज़र में कुछ भी नहीं तोड़ेंगे; वे प्लेसहोल्डर नहीं दिखाएंगे। यदि आप इसके साथ रह सकते हैं, तो यह आपके लिए सबसे अच्छा विकल्प होगा।

अगर वह काफी अच्छा नहीं है, तो आप जावास्क्रिप्ट मार्ग जाने की आवश्यकता होगी। यदि आप JQuery का उपयोग कर रहे हैं, तो कुछ JQuery प्लग-इन हैं जो आपके लिए सभी काम करेंगे, जो प्लेसहोल्डर विकल्प के जितना आसान हो जाता है।

उदाहरण के लिए यह एक का प्रयास करें: http://plugins.jquery.com/project/placeholder (लेकिन ध्यान रखें वहाँ कई उपलब्ध अन्य कहते हैं कि एक ही काम करते हैं कि हो सकता है)

स्रोत

2010-09-09 11:48:58 Spudley

+1। मैं उस पर नहीं आया था। यह एचटीएमएल 5 में एक नई विशेषता है और जाहिरा तौर पर सफारी 5, क्रोम 6 और Firefox 4. –

में समर्थित है मैं इस सवाल का जवाब चाहते हैं, लेकिन बहुत बुरा मैं इसे IE6 = में काम करने के लिए ( – Tek

जावास्क्रिप्ट के साथ <textarea> समाशोधन?

उत्तर

संबंधित मुद्दे