2010-05-14 10 views
7

मैं अपने साइट के प्रत्येक पाठ बॉक्स के लिए एक CSS वर्ग लागू करना चाहते हैं:सीएसएस वर्ग को सभी <इनपुट प्रकार 'टेक्स्ट'> तत्वों में जोड़ना? जावास्क्रिप्ट/सीएसएस?

 <div class="editor-label"> 
      <label for="FoodType">FoodType</label> 
     </div> 
     <div class="editor-field"> 
      <input id="HelpText" name="FoodType" type="text" value="" /> 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 

और मुझे लगा, अरे! आसान। मैं मास्टर पेज में उन सभी को खोजने के लिए एक jquery फ़ंक्शन जोड़ूंगा।

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('input').addClass('textbox'); 
    } 
</script> 

दुर्भाग्यवश यह सबमिट बटन भी चुनेगा। मैं केवल उन इनपुट तत्वों का चयन कैसे कर सकता हूं जिनमें टेक्स्ट प्रकार विशेषता है?

वैकल्पिक रूप से पूरी तरह से सीएसएस का उपयोग करके यह संभव है?

यदि इन दोनों विधियों को संभव नहीं है, तो मुझे लगता है कि मुझे बस अपने द्वारा बनाए गए प्रत्येक टेक्स्टबॉक्स में कक्षा को मैन्युअल रूप से जोड़ना होगा?

उत्तर

21

AFAIK यह है:

$('input[type=text]').addClass('textbox'); 

और तुम सीएसएस फ़ाइल में इसी तरह के कर सकते हैं, लेकिन यह है कि सीएसएस/निर्भर करता है कि व्यापक आप पुराने ब्राउज़र साथ रहना चाहता हूँ के उच्च संस्करण की आवश्यकता है।

here में विशेषता चयनकर्ता देखें। ध्यान दें कि:

"ब्राउज़र समर्थन: केवल उस ब्राउज़र CSS3 विशेषता चयनकर्ताओं का समर्थन नहीं करता IE6 है दोनों IE7 और IE8, ओपेरा और Webkit- और छिपकली आधारित ब्राउज़र करते तो उन्हें अपने शैली पत्रक में इस्तेमाल करते हैं।। निश्चित रूप से सुरक्षित है। "

+0

उत्कृष्ट, बहुत धन्यवाद। – 4imble

+1

'$ ('इनपुट [प्रकार = टेक्स्ट]') 'आईई 6 में काम करेगा क्योंकि jQuery ब्राउज़र के अंतर्निर्मित समर्थन के बजाय अपने स्वयं के चयनकर्ता इंजन का उपयोग करने के लिए वापस आ जाएगा। दूसरी ओर, इनपुट [टाइप = टेक्स्ट] {...} 'सीएसएस स्टाइलशीट में, आईई 6 में असफल हो जाएगा। – bobince

+0

@bobince कैननिकल समाधान एचटीएमएल को एक रेगेक्स के साथ पार्स कर रहा है I अनुमान –

-1
<!DOCTYPE html> 

<html> 
<head> 

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script> 


<script type="text/javascript"> 
$(document).ready(function(){ 

$(".post_class").css({padding:"10px",background:"#333",color:"#fff"}); 

$("#post_button").css({padding:"10px",background:"#333", textAlign:"center",color:"#fff",cursor:"pointer"}) 

$("#post_button").click(function(){ 
var input = $("input[name='checkListItem']").val(); 

$(".post_class").append('<div class="item">' + input + '</div>'); 

}); 

}); 
</script> 


</head> 

<body> 

<form name="checkListForm"> 

<input type="text" name="checkListItem"/> 

</form> 

<div id="post_button">Post</div> 

<br/> 

<div class="post_class"></div> 

</body> 

</html> 
+2

यह सवाल का जवाब नहीं देता है तो यह यहां क्यों पोस्ट किया गया है? – fisk

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