प्रपत्र इनपुट टेक्स्ट फ़ील्ड में अनुमत वर्णों की संख्या

Question

मैं टेक्स्ट बॉक्स में अधिकतम पाँच वर्ण दर्ज करने के लिए उपयोगकर्ता को कैसे सीमित या सीमित कर सकता हूं?

नीचे मेरे फॉर्म के भाग के रूप में इनपुट फ़ील्ड है:

<input type="text" id="sessionNo" name="sessionNum" />

क्या यह कुछ ज्यादा से ज्यादा उपयोग कर रहा है या ऐसा कुछ है?

Comments

यहाँ <input type="text" maxlength="5"> लाइव डेमो: jsfiddle.net/mcBbW/1

— Decime Vidas

Answer 1

अधिकतम गति :

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

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

हालाँकि, यह आपके हैंडलर से प्रभावित हो भी सकता है और नहीं भी। आपको लंबाई के साथ-साथ परीक्षण के लिए किसी अन्य हैंडलर फ़ंक्शन का उपयोग करने या जोड़ने की आवश्यकता हो सकती है।

Comments

इनपुटिंग चरण में सीमित होने पर मुझे यह उत्तर उपयोगी लगा। आप इसे सत्यापन चरण में भी सीमित कर सकते हैं जब patternविशेषता का उपयोग करके सत्यापन संदेश सबमिट और पॉप अप किया जाए । देखें stackoverflow.com/questions/10281962/...

Answer 2

ऐसा करने का सबसे सरल तरीका:

maxlength="5"

तो .. इस विशेषता को अपने नियंत्रण में जोड़ना:

<input type="text" 
    id="sessionNo" 
    name="sessionNum" 
    onkeypress="return isNumberKey(event)" 
    maxlength="5" />

Answer 3

शीर्ष लेख में निम्न जोड़ें:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
}
</script>

    <input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" 
onKeyUp="limitText(this,5);"" />

Comments

this.form.sessionNoथोड़ा संदिग्ध लगता है। सिर्फ क्यों नहीं this? इसके अलावा, limitCountऔर limitNumआदेश से बाहर भी लगता है / अनावश्यक?

— जारेड फरिश

इसे ठीक किया। इस तरह से यदि आप इसे कुछ वर्णों या संख्याओं तक सीमित करना चाहते हैं, लेकिन यदि आप इस बारे में परवाह नहीं करते हैं तो अधिकतम लंबाई ठीक काम करेगी। तो मान लीजिए कि यदि आप चाहते थे कि मान 1-50 के बीच हो या आप सभी सकारात्मक संख्या, आदि हो

— b3verelabs

this.form.sessionNoअभी भी सही नहीं लगता है। thisउस संदर्भ में इंगित करेगा input, नहीं document।

— जारेड फरिश

अभी भी सही नहीं है, यह formया तो संदर्भ नहीं है । thisआपको जो चाहिए वह यह है। इसके अलावा, तकनीकी रूप से यदि आप द्वारा तत्व को संदर्भित करने के लिए इच्छुक थे form, यह द्वारा (होगा form/ input) name, नहीं id: अर्थात document.formName.sessionNum।

— जारेड फरिश

सही है कि मैंने उपवास के लिए टाइप किया था यह पहले एक रूप में लपेटा गया था। लेकिन आप फ़ील्ड के वर्तमान मूल्य को प्राप्त करने के लिए फ़ंक्शन में इनपुट को रेफरी पास करेंगे और फिर उस फ़ील्ड को सीमित करने के लिए कोई भी तर्क जोड़ें।

— b3verelabs

Answer 4

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

यहां तक ​​कि अगर आप MAXLENGTH को एक उचित संख्या में निर्दिष्ट करते हैं, तो सुनिश्चित करें कि आप संसाधित होने से पहले सर्वर पर सबमिट किए गए डेटा की लंबाई को दोगुना कर सकते हैं (php या asp जैसी चीज़ का उपयोग करके) क्योंकि वैसे भी मूल MAXLENGTH प्रतिबंध के आसपास इसे प्राप्त करना काफी आसान है

Comments

@lopezdp, html / जावास्क्रिप्ट प्रतिबंधों के आसपास "पाने" के कई तरीके हैं। चेक करने के लिए सबसे आसान है अपने पृष्ठ को क्रोम, "तत्व का निरीक्षण करें" और मैन्युअल रूप से HTML को संशोधित करना। चारों ओर पाने के लिए अधिक विस्तृत तरीका - एक स्क्रिप्ट लिखें जो डेटा को किसी भी प्रतिबंध (कर्ल लाइब्रेरी या कुछ इसी तरह का उपयोग करके) को अनदेखा करेगा। एक बैकएंड डेवलपर के रूप में आपको कभी भी डेटा के सत्यापन पर भरोसा नहीं करना चाहिए - सभी नियमों को सर्वर पर डुप्लिकेट किया जाना चाहिए। फ्रंटेंड सत्यापन सर्वर से अनुरोध किए बिना स्पष्ट त्रुटियों को इंगित करके उपयोगकर्ता के लिए समय बचाने का एक तरीका है।

— वैल पेट्रूचेक

Answer 5

<input type="text" maxlength="5">

इनपुट में हो सकने वाले अक्षरों की अधिकतम मात्रा 5 है।

Answer 6

इसे सरल बनाओ

<input type="text" maxlength="3" />

और यह दिखाने के लिए कि अधिकतम चार्ट का उपयोग किया गया है, अलर्ट का उपयोग करें।

Answer 7

मैं इसे इस तरह से करता हूँ:

$(document).ready(function(){
var maxChars = $("#sessionNum");
var max_length = maxChars.attr('maxlength');
if (max_length > 0) {
    maxChars.bind('keyup', function(e){
        length = new Number(maxChars.val().length);
        counter = max_length-length;
        $("#sessionNum_counter").text(counter);
    });
}
});

इनपुट:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>

Answer 8

अधिकतम लंबाई

अधिकतम वर्ण जो इनपुट के रूप में स्वीकार किए जाएंगे। अधिकतम गति तत्व में अनुमत अधिकतम वर्णों को निर्दिष्ट करता है।

Maxlength W3 स्कूलों

<form action="/action_page.php">
    Username: <input type="text" name="usrname" maxlength="5"><br>
    <input type="submit" value="Submit">
</form>

Answer 9

आप उपयोग कर सकते हैं <input type = "text" maxlength="9"> या

<input type = "number" maxlength="9">संख्याओं के लिए या <input type = "email" maxlength="9">ईमेल सत्यापन के लिए दिखाई देगा

Answer 10

<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">

function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)
}

Answer 11

अधिकतम उपयोग करें "" चार्जर्स की संख्या "

<input type="text" id="sessionNo" name="sessionNum" maxlenght="7" />

Answer 12

निम्नलिखित कोड में एक गिनती शामिल है ...

var count = 1;

do {
    function count_down(obj, count){

    let element = document.getElementById('count'+ count);

    element.innerHTML = 80 - obj.value.length;

    if(80 - obj.value.length < 5){
        element.style.color = "firebrick";
    }else{
        element.style.color = "#333";
    }
}
count++;
} while (count < 20); 

.text-input {
    padding: 8px 16px;
    width: 50%;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    font-family: Raleway;
    border: 1px solid dodgerblue;
  }

<p><input placeholder="Title" id="bike-input-title" onkeyup="count_down(this, 3)" maxlength="80"  class="text-input" name="bikeTitle" ></p>
        <span id="count3" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br>

Answer 13

<input type="text" name="MobileNumber" id="MobileNumber" maxlength="10" onkeypress="checkNumber(event);"  placeholder="MobileNumber">

<script>
function checkNumber(key) {
  console.log(key);
  var inputNumber = document.querySelector("#MobileNumber").value;
  if(key.key >= 0 && key.key <= 9) {
    inputNumber += key.key;
  }
  else {
    key.preventDefault();
  }
}
</script>