फ़ील्ड को अक्षम किए बिना उपयोगकर्ता को टेक्स्ट फ़ील्ड में टाइप करने से कैसे रोकें?

Question

मैंने कोशिश की:

$('input').keyup(function() {

   $(this).attr('val', '');

});

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

Comments

है keydown()या keypress()किसी भी अधिक प्रभावी?

— ssell

Answer 1

एक गैर-जावास्क्रिप्ट विकल्प जिसे आसानी से अनदेखा किया जा सकता है: क्या आप readonlyविशेषता के बजाय विशेषता का उपयोग कर सकते हैं disabled? यह इनपुट में पाठ को संपादित करने से रोकता है, लेकिन ब्राउज़र इनपुट को अलग तरह से स्टाइल करते हैं (उदाहरण के लिए "इसे ग्रे करने की संभावना कम")<input readonly type="text" ...>

Comments

ईमानदारी से, यह मैं कहूंगा कि सबसे अच्छा समाधान है।

— क्रिश्चियन मैन

आसानी से पढ़ी जाने वाली विशेषता का कोई मूल्य नहीं है, इसे बस HTML 4.01 और HTML5 दोनों में मौजूद होना चाहिए । केवल उस समय के मान की आवश्यकता होती है जो मान्य XHTML दस्तावेज़ों में है (जो वेब पर अत्यंत दुर्लभ हैं)।

— रॉब

यह बिल्कुल सही है रॉबग, मुझे इसका उल्लेख करना चाहिए था। यह भी उल्लेख करना चाहते हैं कि इस विशेषता को textarea तत्वों के लिए काम करना चाहिए, और मुझे लगता है कि यह चेकबॉक्स / रेडियो इनपुट के लिए भी काम करता है।

— माइक मर्कटॉक

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

— केल्ट्रोप

यदि उपयोगकर्ता के अनुभव के बारे में चिंताएं हैं या यदि रीडोनिली फ़ील्ड की डिफ़ॉल्ट स्टाइलिंग केवल सादा बदसूरत है, तो प्रगतिशील वृद्धि दृष्टिकोण लें और इसे स्पष्ट करने के लिए CSS का उपयोग करें कि यह संपादन योग्य नहीं है: jsfiddle.net/eBh5N

— माइक मर्सटॉक

Answer 2

यदि आप नहीं चाहते कि फ़ील्ड "अक्षम" या smth दिखे, तो बस इसका उपयोग करें:

onkeydown="return false;"

यह मूल रूप से एक ही है कि greengit और डेरेक ने कहा लेकिन थोड़ा छोटा है

Comments

मुझे e.preventDefault();AddEventListener में शामिल होना पड़ा

— जिम जोन्स

और भी छोटा:onkeydown="return false"

— CoderPi

बस इस बात से अवगत रहें कि यह उपयोगकर्ता को माउस से टेक्स्ट चिपकाने से नहीं रोकता है।

— gsanta

उदाहरण के लिए डेटपिकर का उपयोग करते समय यह सही है, ताकि उपयोगकर्ता को तिथि टाइप करने से रोका जा सके और वास्तव में डेटापिक का उपयोग किया जा सके। लेकिन जैसा कि @gsanta ने कहा, वे अभी भी पाठ को चिपकाने में सक्षम होंगे, इसलिए बस बैक-एंड सत्यापन सत्यापन के लिए सुनिश्चित करें :)

— MattiasH

ASP.NET वेबसाइट पर, पाठ बॉक्स को आसानी से सेट करने के कारण पाठ वापस पोस्ट पर खो जाता है। ऐसे मामलों में यह बेहतर उपाय है।

— यस

Answer 3

$('input').keydown(function(e) {
   e.preventDefault();
   return false;
});

Comments

वास्तव में, मेरे पास जन्म क्षेत्र है और मैं इसे उपयोगकर्ता टाइपिंग से रोकना चाहता हूं, इसलिए मेरे लिए आपका जवाब अच्छा है !! अगर मैं "readonly" विशेषता का उपयोग करता हूं तो उपयोगकर्ता इनपुट पर क्लिक नहीं कर पाएगा और DOB पॉपअप इनपुट पर क्लिक के माध्यम से आ जाएगा। और धन्यवाद

— नीरज सिंह

Answer 4

$('input').keypress(function(e) {
    e.preventDefault();
});

Comments

यह केवल इनपुट को रोकेगा, जबकि आप अभी भी तीर कुंजी और इतने पर उपयोग कर सकते हैं। धन्यवाद!

— कोडरपी

Answer 5

यदि आप उपयोगकर्ता को कुछ भी जोड़ने से रोकना चाहते हैं, लेकिन उन्हें वर्णों को मिटाने की क्षमता प्रदान करें:

<input value="CAN'T ADD TO THIS" maxlength="0" />

maxlengthएक इनपुट की विशेषता को "0"इसे बनाने के लिए सेट करना ताकि उपयोगकर्ता सामग्री को जोड़ने में असमर्थ हो, लेकिन फिर भी वे अपनी इच्छानुसार सामग्री मिटा सकते हैं ।

---

लेकिन अगर आप चाहते हैं कि यह वास्तव में स्थिर और अपरिवर्तनीय हो:

<input value="THIS IS READONLY" onkeydown="return false" />

इनपुट को इस पर उपयोगकर्ता को अनदेखा onkeydownकरने के लिए विशेषता सेट करना , इस प्रकार उन्हें मूल्य को बदलने या प्रभावित करने से रोकना है।return falsekeypresses

Answer 6

एक अन्य विधि जिसका उपयोग आवश्यकता के आधार पर किया जा सकता है $('input').onfocus(function(){this.blur()}); मुझे लगता है कि आप इसे कैसे लिखेंगे। मैं jquery में कुशल नहीं हूँ।

Answer 7

मार्कअप

<asp:TextBox ID="txtDateOfBirth" runat="server" onkeydown="javascript:preventInput(event);" onpaste="return false;"
                                TabIndex="1">

लिपि

function preventInput(evnt) {
//Checked In IE9,Chrome,FireFox
if (evnt.which != 9) evnt.preventDefault();}

Comments

यह आपको अपने DatePicker दायर में टैब की कार्यक्षमता को लागू करने और संपादन को रोकने में मदद करेगा।

— बीजू कलंजूर

Answer 8

मुझे ऐसा एक ऐड करना पसंद है जो डायनामिक जावास्क्रिप्ट डीएएम क्रिएशन के साथ काम करता है जैसे डी 3 जहां इसे जोड़ना असंभव है:

//.attr(function(){if(condition){"readonly"]else{""}) //INCORRECT CODE !

HTML इनपुट पर कार्रवाई को रोकने के लिए DOM तत्व कक्षा में आसानी से जोड़ते हैं:

var d = document.getElementById("div1");
d.className += " readonly";

या डी 3 में:

 .classed("readonly", function(){
   if(condition){return true}else{return false}
 })

और CSS या उससे कम में जोड़ें:

.readonly {
  pointer-events: none;
}

इस समाधान के बारे में अच्छी बात यह है कि आप इसे गतिशील रूप से चालू कर सकते हैं और एक फ़ंक्शन में इसलिए इसे निर्माण के समय उदाहरण 3 डी के लिए एकीकृत किया जा सकता है (एकल "आसानी से" विशेषता के साथ संभव नहीं है)।

तत्व को कक्षा से निकालने के लिए:

document.getElementById("MyID").className =
  document.getElementById("MyID").className.replace(/\breadonly\b/,'');

या Jquery का उपयोग करें:

$( "div" ).removeClass( "readonly" )

या कक्षा को टॉगल करें:

$( "div" ).toggleClass( "readonly", addOrRemove );

बस पूरा होने के लिए, सौभाग्य = ^)

Answer 9

बस onkeydown का उपयोग करें = "गलत पर लौटें" जैसे नीचे दिखाए गए टैग पर, यह उपयोगकर्ता से मानों को स्वीकार नहीं करेगा।

    <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True"
ontextchanged="txtDate_TextChanged" onkeydown="return false" >
    </asp:TextBox>

Answer 10

एक विकल्प इस inputघटना के लिए एक हैंडलर को बांधने का है ।

इस दृष्टिकोण का लाभ यह है कि हम कीबोर्ड व्यवहार को नहीं रोकते हैं जो उपयोगकर्ता अपेक्षा करता है (जैसे टैब, पृष्ठ ऊपर / नीचे, आदि)।

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

यह दृष्टिकोण सबसे अच्छा काम करता है यदि आप केवल इनपुट को खाली रखने के बारे में परवाह करते हैं। यदि आप एक विशिष्ट मूल्य बनाए रखना चाहते हैं, तो आपको इस बात को ट्रैक करना होगा कि कहीं (डेटा विशेषता में?) क्योंकि यह inputघटना प्राप्त होने पर उपलब्ध नहीं होगा ।

const inputEl = document.querySelector('input');

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});

<input type="text" />

सफारी 10, फ़ायरफ़ॉक्स 49, क्रोम 54, आईई 11 में परीक्षण किया गया।

Answer 11

सीएसएस-केवल समाधान के लिए, pointer-events: noneइनपुट पर सेटिंग का प्रयास करें ।