कैसे आप स्वचालित रूप से अपरकेस को टेक्स्ट बॉक्स सेट करते हैं?

Question

उपयोगकर्ता इनपुट को अपरकेस पर सेट करने के लिए मैं निम्नलिखित शैली विशेषता का उपयोग कर रहा हूं ताकि जब उपयोगकर्ता उदाहरण के लिए टेक्स्ट बॉक्स में लिखना शुरू कर दे railway, तो इसे कैपिटल अक्षरों में बदल दिया जाना चाहिए जैसे RAILWAY कि उपयोगकर्ता को कैप्स-लॉक बटन दबाए बिना।

यह वह कोड है जिसका मैं इनपुट के लिए उपयोग कर रहा हूं:

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

लेकिन मुझे इस विशेषता का उपयोग करके वांछित आउटपुट नहीं मिल रहा है।

Comments

जैसा कि नीचे उल्लेख किया गया है, = और मूल्यों के बीच रिक्त स्थान होने से सावधान रहें "पाठ"

— जोनाथन सफा

Answer 1

आपने टैग के स्थान styleपर विशेषता डाल दी <img>है <input>।

यह भी एक अच्छा विचार नहीं है कि विशेषता नाम और मूल्य के बीच रिक्त स्थान है ...

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

कृपया ध्यान दें कि यह परिवर्तन विशुद्ध रूप से दृश्य है, और POST में भेजे गए पाठ को नहीं बदलता है।

Comments

ध्यान दें कि यदि आप इस डेटा को POST के माध्यम से भेजते हैं, तो यह इसे आपके द्वारा टाइप किए गए तरीके से भेजेगा, न कि यह स्क्रीन पर कैसे दिखाया गया है।

— विंसेंट पियरिएर

@freefaller, इसने सभी इनपुट को अपरकेस में बदल दिया, लेकिन mysql में डालने से टेक्स्ट को कम किया जाता है, कैपिटल लेटर को कैसे बदला जाए!

— डेविड जब हेप

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

— freefaller

यह एक पूर्ण समाधान नहीं है, क्योंकि प्लेसहोल्डर अब अपरकेस है (जो ज्यादातर मामलों में नहीं होना चाहिए)। जावास्क्रिप्ट का उपयोग करने के अलावा और कोई रास्ता नहीं है।

— टेमेरिको

भविष्य के पाठक जो विशुद्ध रूप से दृश्य के बजाय मूल्य पर बदलाव चाहते हैं, बुरक टोकक का जवाब देखें ।

— दीनी

Answer 2

मुझे लगता है कि सबसे मजबूत समाधान जो बीमा करेगा कि यह अपरकेस में पोस्ट किया गया है, ऑनिनपुट विधि इनलाइन का उपयोग करना है:

<input oninput="this.value = this.value.toUpperCase()" />

संपादित करें

कुछ लोग शिकायत करते रहे हैं कि मूल्य को संपादित करते समय कर्सर अंत में कूदता है, इसलिए इस थोड़ा विस्तारित संस्करण को इसका समाधान करना चाहिए

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

Answer 3

text-transformation:uppercaseस्टाइल के साथ उत्तर सबमिट किए गए सर्वर पर अपरकेस डेटा नहीं भेजेंगे - आप क्या उम्मीद कर सकते हैं। आप इसके बजाय ऐसा कुछ कर सकते हैं:

आपके इनपुट HTML के लिए onkeydown का उपयोग करें:

<input name="yourInput" onkeydown="upperCaseF(this)"/>

आपके जावास्क्रिप्ट में:

function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

upperCaseF()हर कुंजी को नीचे दबाए जाने के साथ , इनपुट का मान उसके अपरकेस रूप में बदल जाता है।

मैंने 1ms देरी को भी जोड़ा ताकि कीडाउन इवेंट के बाद फ़ंक्शन कोड ब्लॉक ट्रिगर हो।

Comments

एक इस्तेमाल कर सकते हैं घटना के बजाय और से छुटकारा पाने के तरीके को। inputkeydownsetTimeout

— दीनी

यह काम करता है, लेकिन आप अपरकेस के निचले हिस्से में छलांग लगाने से कैसे बचें?

— जोनाथन सफा

"इनपुट ईवेंट" विचार के साथ, इस विशेषता को inputतत्व में जोड़ने से काम करना अच्छा लगता है:oninput="this.value = this.value.toUpperCase()"

— टॉमी स्टैंटन

@ text-transform:uppercase

— जोनाथनसफ़ा

जब कोई उपयोगकर्ता मौजूदा पाठ को संपादित करता है और अंत के अलावा कर्सर को कहीं और रखता है, तो कर्सर हर वर्ण के साथ अंत में कूद जाएगा। क्या कर्सर को संरक्षित करने के साथ-साथ पाठ को अपरकेस में बदलने का कोई तरीका है?

— माइक वोडास्की

Answer 4

पहले उत्तर के साथ समस्या यह है कि प्लेसहोल्डर अपरकेस भी होगा। यदि आप चाहते हैं कि केवल इनपुट अपरकेस हो, तो निम्न समाधान का उपयोग करें।

केवल गैर-रिक्त इनपुट तत्व का चयन करने के लिए, तत्व पर आवश्यक विशेषता डालें:

<input type="text" id="name-input" placeholder="Enter symbol" required="required" />

अब, इसे चुनने के लिए, :validछद्म तत्व का उपयोग करें :

#name-input:valid { text-transform: uppercase; }

इस तरह आप केवल वर्णों में प्रवेश करेंगे।

Comments

यह जवाब काम नहीं करता है और इसका कोई मतलब नहीं है। यदि इनपुट मान्य है तो ही कोई चयन इनपुट टेक्स्ट को प्रभावित करेगा और प्लेसहोल्डर को क्यों नहीं? मुझे लगता है कि यदि रिक्त मान मान्य नहीं था, तो यह संयोग से काम कर सकता है। मैंने यहाँ उत्तर का उपयोग किया: stackoverflow.com/questions/25180140/…

— बेन थर्ले

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

— tomericco

यह वास्तव में उपयोगी समाधान है, और वास्तव में मुझे इसकी आवश्यकता है। यह हर स्थिति में फिट नहीं होगा क्योंकि यह आवश्यक क्षेत्र पर निर्भर करता है, लेकिन टूलबॉक्स में होना निश्चित रूप से आसान है!

— टिम मैके

Answer 5

प्रयत्न

<input type="text" class="normal" 
       style="text-transform:uppercase" 
       name="Name" size="20" maxlength="20"> 
 <img src="../images/tickmark.gif" border="0"/>

इमेज के बजाय इनपुट पर स्टाइल टैग लगाएं क्योंकि आप इनपुट पर लिख रहे हैं इमेज पर नहीं

Comments

हालाँकि, यह प्लेसहोल्डर टेक्स्ट को अपरकेस भी बनाता है।

— काजीम ज़ैदी

Answer 6

सभी टेक्स्टबॉक्स को अपरकेस पर सेट करने के लिए निम्नलिखित स्टाइल सेट करें

input {text-transform: uppercase;}

Answer 7

CSS स्टाइलिंग के साथ समस्या यह है कि यह डेटा नहीं बदल रहा है, और यदि आप JS फ़ंक्शन नहीं करना चाहते हैं, तो प्रयास करें ...

<input onkeyup="this.value = this.value.toUpperCase()" />

आप खुद ही कीप पर फ़ील्ड कैपिटल देखेंगे, इसलिए इसे style='text-transform:uppercase'दूसरों के सुझाव के साथ संयोजित करना वांछनीय हो सकता है ।

Answer 8

CSS का उपयोग text-transform: uppercaseकरने से वास्तविक इनपुट में बदलाव नहीं होता है बल्कि केवल इसका लुक बदल जाता है। यदि आप किसी सर्वर को इनपुट डेटा भेजते हैं तो यह अभी भी कम होता जा रहा है या फिर आपने इसे दर्ज किया है। नीचे दिए गए जावास्क्रिप्ट कोड को जोड़ने के लिए वास्तव में इनपुट मूल्य को बदलने के लिए:

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

यहाँ मैं toLocaleUpperCase()कन्वर्ट करने के लिए उपयोग कर रहा हूँinput मूल्य को अपरकेस में । यह तब तक ठीक काम करता है जब तक कि आपने जो दर्ज किया था, उसे संपादित करने की आवश्यकता है, जैसे कि अगर आपने ABCXYZ में प्रवेश किया था और अब आप इसे ABCLMNXYZ में बदलने का प्रयास करते हैं, तो यह ABCLXYZMN हो जाएगा क्योंकि हर इनपुट के बाद कर्सर अंत में कूदता है।

कर्सर की इस उछाल को दूर करने के लिए, हमें अपने कार्य में निम्नलिखित परिवर्तन करने होंगे:

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

अब सब कुछ उम्मीद के मुताबिक काम करता है, लेकिन अगर आपके पास पीसी धीमा है, तो आप पाठ को नीचे से ऊपर की ओर छलांग लगाते हुए देख सकते हैं। यदि यह आपको परेशान करता है, तो यह सीएसएस का उपयोग करने का समय है, input: {text-transform: uppercase;}सीएसएस फ़ाइल पर लागू होता है और सब कुछ ठीक हो जाएगा।

Answer 9

यह दोनों अपरकेस में इनपुट दिखाएगा और अपरकेस में पोस्ट के माध्यम से इनपुट डेटा भेजेगा।

एचटीएमएल

<input type="text" id="someInput">

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

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

Answer 10

जैसा कि किसी ने सुझाव नहीं दिया:

यदि आप सीएसएस समाधान को लोअरकेस प्लेसहोल्डर्स के साथ उपयोग करना चाहते हैं, तो आपको बस प्लेसहोल्डर्स को अलग से स्टाइल करना होगा। IE संगतता के लिए 2 प्लेसहोल्डर शैलियों को विभाजित करें।

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

Answer 11

नीचे दिए गए समाधान का प्रयास करें, यह तब भी ध्यान रखेगा जब कोई उपयोगकर्ता पहली अनुक्रमणिका में इनपुट क्षेत्र में केवल रिक्त स्थान में प्रवेश करता है।

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});

<input type="text" id="capitalizeInput" autocomplete="off" />

Answer 12

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">

Comments

यह उत्तर पहले दिए गए सभी से कैसे अलग है?

— मकर