maxlengthविशेषता के साथ काम नहीं कर रहा है <input type="number">। ऐसा केवल क्रोम में होता है।
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>maxlengthविशेषता के साथ काम नहीं कर रहा है <input type="number">। ऐसा केवल क्रोम में होता है।
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>जवाबों:
के लिए MDN के प्रलेखन से<input>
यदि का मान प्रकार विशेषता है
text,search,password,tel, याurl, इस विशेषता वर्णों की अधिकतम संख्या (यूनिकोड कोड अंक में) है कि उपयोगकर्ता दर्ज कर सकते हैं निर्दिष्ट करता है; अन्य नियंत्रण प्रकारों के लिए, इसे अनदेखा कर दिया जाता है।
तो डिजाइन द्वारा maxlengthनजरअंदाज कर दिया जाता है <input type="number">।
अपनी आवश्यकताओं के आधार पर, आप उन विशेषताओं minऔर maxविशेषताओं का उपयोग कर सकते हैं, जो उनके उत्तर में दिए गए इनॉन के रूप में बताए गए हैं (NB: यह केवल एक सीमित सीमा को परिभाषित करेगा, न कि मूल्य की वास्तविक वर्ण लंबाई, हालांकि -9999 से 9999 सभी 0-4 को कवर करेगा। अंक संख्या), या आप एक नियमित पाठ इनपुट का उपयोग कर सकते हैं और नई patternविशेषता के साथ क्षेत्र पर सत्यापन लागू कर सकते हैं :
<input type="text" pattern="\d*" maxlength="4">type=numberसेट करके इनपुट में प्रतिबंधित नहीं कर सकते हैं max। यह विशेषता केवल इनपुट स्पिनर द्वारा चुनी गई संख्या को प्रतिबंधित करती है।
\d*यहाँ क्या है
regexऔर पैटर्न एक अविश्वसनीय रूप से रचनात्मक है। लेकिन मोबाइल में, कोई भिन्न Androidया iOS, यह एक textइनपुट है तो यह एक बुरा कारण है UX।
अधिकतम लंबाई अधिकतम <input type="number"तरीके से काम नहीं करेगी, मुझे पता है oninputकि अधिकतम गति को सीमित करने के लिए घटना का उपयोग करना है। कृपया नीचे दिया गया कोड देखें।
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
||0/1
oninput="this.value=this.value.slice(0,this.maxLength)"काम करना चाहिए
<input type="number"> stackoverflow.com/questions/18510845/…
कई लोगों ने onKeyDown()ईवेंट पोस्ट किया जो सीमा तक काम नहीं कर रहा है यानी आप एक बार सीमा तक पहुंच नहीं सकते। इसलिए onKeyDown()उपयोग के बजाय onKeyPress()और यह पूरी तरह से ठीक काम करता है।
नीचे काम कर रहा है कोड:
User will not be allowed to enter more than 4 digits
<br>
<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" />numberइनपुट प्रकार
मेरे पास आपके लिए दो तरीके हैं
पहला: उपयोग करें type="tel", यह type="number"मोबाइल की तरह काम करेगा, और अधिकतम गति को स्वीकार करेगा:
<input type="tel" />दूसरा: जावास्क्रिप्ट का थोड़ा प्रयोग करें:
<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />
आप न्यूनतम और अधिकतम विशेषताओं का उपयोग कर सकते हैं ।
निम्नलिखित कोड समान हैं:
<input type="number" min="-999" max="9999"/>9999जो उपयोगकर्ता मैन्युअल रूप से उस संख्या से अधिक कर सकता है जो उस लंबाई से अधिक है।
अपने इनपुट प्रकार को टेक्स्ट में बदलें और फ़ंक्शन को कॉल करने के लिए "oninput" ईवेंट का उपयोग करें:
<input type="text" oninput="numberOnly(this.id);" class="test_css" maxlength="4" id="flight_number" name="number"/>अब उपयोगकर्ता इनपुट को फ़िल्टर करने के लिए जावास्क्रिप्ट रेगेक्स का उपयोग करें और इसे केवल संख्याओं तक सीमित करें:
function numberOnly(id) {
// Get element by id which passed as parameter within HTML element event
var element = document.getElementById(id);
// Use numbers only pattern, from 0 to 9
var regex = /[^0-9]/gi;
// This removes any other character but numbers as entered by user
element.value = element.value.replace(regex, "");
}मैं एक बार उसी समस्या में पड़ गया और इस समाधान को अपनी आवश्यकताओं के संबंध में पाया। यह कुछ मदद कर सकता है।
<input type="number" placeholder="Enter 4 Digits" max="9999" min="0"
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>हैप्पी कोडिंग :)
<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">डेमो - JSFIDDLE
यहाँ jQuery के साथ मेरा समाधान है ... आपको अपने इनपुट प्रकार = संख्या में अधिकतम गति जोड़ना है
$('body').on('keypress', 'input[type=number][maxlength]', function(event){
var key = event.keyCode || event.charCode;
var charcodestring = String.fromCharCode(event.which);
var txtVal = $(this).val();
var maxlength = $(this).attr('maxlength');
var regex = new RegExp('^[0-9]+$');
// 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9
if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){
return true;
}
// maxlength allready reached
if(txtVal.length==maxlength){
event.preventDefault();
return false;
}
// pressed key have to be a number
if( !regex.test(charcodestring) ){
event.preventDefault();
return false;
}
return true;
});और कॉपी और पेस्ट संभालें:
$('body').on('paste', 'input[type=number][maxlength]', function(event) {
//catch copy and paste
var ref = $(this);
var regex = new RegExp('^[0-9]+$');
var maxlength = ref.attr('maxlength');
var clipboardData = event.originalEvent.clipboardData.getData('text');
var txtVal = ref.val();//current value
var filteredString = '';
var combined_input = txtVal + clipboardData;//dont forget old data
for (var i = 0; i < combined_input.length; i++) {
if( filteredString.length < maxlength ){
if( regex.test(combined_input[i]) ){
filteredString += combined_input[i];
}
}
}
setTimeout(function(){
ref.val('').val(filteredString)
},100);
});मुझे उम्मीद है कि यह किसी की मदद करता है।
this.value = this.value.slice(0, this.maxLength);क्या आपको लगता है कि यह कोई मुद्दा है? मुझे अब तक कोई नहीं मिला है। इसमें पेस्ट किए गए टेक्स्ट को भी शामिल किया गया है।
मेरे अनुभव में अधिकांश मुद्दे जहां लोग पूछ रहे हैं कि क्यों maxlengthअनदेखा किया गया है क्योंकि उपयोगकर्ता को "अनुमत" वर्णों की संख्या से अधिक इनपुट करने की अनुमति है।
जैसा कि अन्य टिप्पणियों में कहा गया है, type="number"इनपुट में एक maxlengthविशेषता नहीं है और इसके बजाय, एक minऔर maxविशेषता है।
फ़ील्ड को उन वर्णों की संख्या सीमित करने के लिए, जो फ़ॉर्म सबमिट होने से पहले उपयोगकर्ता को इसके बारे में जानकारी देने की अनुमति दी जा सकती है (ब्राउज़र को मूल्य की पहचान करना चाहिए> अधिकतम अन्यथा), आपको (अब के लिए, कम से कम) एक जोड़ना होगा मैदान में श्रोता।
यहाँ एक समाधान है जिसका उपयोग मैंने अतीत में किया है: http://codepen.io/wuori/pen/LNyYBM
मुझे पता है कि पहले से ही एक उत्तर है, लेकिन यदि आप चाहते हैं कि आपका इनपुट बिल्कुल maxlengthविशेषता की तरह व्यवहार करे या जितना संभव हो उतना निकट हो, तो निम्न कोड का उपयोग करें:
(function($) {
methods = {
/*
* addMax will take the applied element and add a javascript behavior
* that will set the max length
*/
addMax: function() {
// set variables
var
maxlAttr = $(this).attr("maxlength"),
maxAttR = $(this).attr("max"),
x = 0,
max = "";
// If the element has maxlength apply the code.
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {
// create a max equivelant
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
while (x < maxlAttr) {
max += "9";
x++;
}
maxAttR = max;
}
// Permissible Keys that can be used while the input has reached maxlength
var keys = [
8, // backspace
9, // tab
13, // enter
46, // delete
37, 39, 38, 40 // arrow keys<^>v
]
// Apply changes to element
$(this)
.attr("max", maxAttR) //add existing max or new max
.keydown(function(event) {
// restrict key press on length reached unless key being used is in keys array or there is highlighted text
if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
});;
}
},
/*
* isTextSelected returns true if there is a selection on the page.
* This is so that if the user selects text and then presses a number
* it will behave as normal by replacing the selection with the value
* of the key pressed.
*/
isTextSelected: function() {
// set text variable
text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return (text.length > 0);
}
};
$.maxlengthNumber = function(){
// Get all number inputs that have maxlength
methods.addMax.call($("input[type=number]"));
}
})($)
// Apply it:
$.maxlengthNumber();Chrome (तकनीकी रूप से, ब्लिंक) अधिकतम गति को लागू नहीं करेगा<input type="number"> ।
HTML5 विनिर्देश कहता है कि अधिकतम गति केवल पाठ, url, ई-मेल, खोज, टेली और पासवर्ड के प्रकारों पर लागू होती है।
मैं हाल ही में कोशिश की है कि पूर्ण समाधान है:
<input class="class-name" placeholder="1234567" name="elementname" type="text" maxlength="4" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />मैं इसे त्वरित और समझने में आसान बनाऊंगा!
के लिए type='number'अधिकतम गति के बजाय (अधिकतम तरंग का मतलब एक textप्रकार में एक स्ट्रिंग के लिए अधिकतम अक्षरों को परिभाषित करना है ), उपयोग min=''और max=''।
चियर्स
<input type="number"> बस यह है ... एक संख्या इनपुट (यद्यपि, एक स्ट्रिंग से अनजाने में जावास्क्रिप्ट के माध्यम से तैरने के लिए)।
मेरा अनुमान है, यह कुंजी इनपुट पर वर्णों को प्रतिबंधित नहीं करता है maxLengthया अन्यथा आपका उपयोगकर्ता "कुंजी जाल" में फंस सकता है यदि वे शुरुआत में एक दशमलव भूल गए थे ( जब एक "maxLength" attr पहले ही पहुंच चुका हो तो .सूचकांक डालने की कोशिश करें) )। यदि आप एक विशेषता सेट करते हैं तो यह फॉर्म सबमिट पर मान्य होगा ।1<input type"text">max
यदि आप किसी फ़ोन नंबर को प्रतिबंधित / मान्य करने का प्रयास कर रहे हैं, तो type="tel"attr / value का उपयोग करें । यह maxLengthattr का पालन करता है और केवल (आधुनिक ब्राउज़रों में) मोबाइल नंबर कीबोर्ड लाता है और आप इनपुट को एक पैटर्न (यानी pattern="[0-9]{10}") तक सीमित कर सकते हैं ।
maxlenght - इनपुट प्रकार पाठ
<input type="email" name="email" maxlength="50">jQuery का उपयोग:
$("input").attr("maxlength", 50)maxlenght - इनपुट प्रकार संख्या
जे एस
function limit(element, max) {
var max_chars = max;
if(element.value.length > max_chars) {
element.value = element.value.substr(0, max_chars);
}
}एचटीएमएल
<input type="number" name="telefono" onkeydown="limit(this, 20);" onkeyup="limit(this, 20);">
type="number"HTML 5 विनिर्देश से एक नया प्रकार है। ब्राउज़र आप में परीक्षण कर रहे हैं नहीं पहचानता हैtype="number"यह यह मानकर चलेगाtype="text"जो करता है सम्मानmaxlengthविशेषता। यह आपके द्वारा देखे जा रहे व्यवहार की व्याख्या कर सकता है।