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বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন (এনবি: এটি কেবলমাত্র একটি সীমাবদ্ধ সীমার সংজ্ঞা দেবে, মানটির প্রকৃত চরিত্রের দৈর্ঘ্য নয়, যদিও -৯৯৯৯ থেকে ৯৯৯৯ পর্যন্ত সমস্ত ০-৪ হবে অঙ্ক সংখ্যা), বা আপনি একটি নিয়মিত পাঠ্য ইনপুট ব্যবহার করতে পারেন এবং নতুন বৈশিষ্ট্য সহ ক্ষেত্রটিতে বৈধতা প্রয়োগ করতে পারেন :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ব্যবহারকারী দৈর্ঘ্যটি অতিক্রম করে ম্যানুয়ালি কোনও সংখ্যায় টাইপ করতে পারেন তার সংখ্যাটি অতিক্রম করতে পারবেন না ।
আপনার ইনপুট প্রকারকে পাঠ্যে পরিবর্তন করুন এবং ফাংশন কল করতে "অনিনপুট" ইভেন্টটি ব্যবহার করুন:
<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();ক্রোম (প্রযুক্তিগতভাবে, ব্লিঙ্ক) এর জন্য সর্বোচ্চ দৈর্ঘ্য প্রয়োগ করবে না<input type="number"> ।
এইচটিএমএল 5 স্পেসিফিকেশন বলছে যে সর্বোচ্চতা কেবলমাত্র পাঠ্য, ইউআরএল, ই-মেইল, অনুসন্ধান, টেলিফোন এবং পাসওয়ার্ডের ক্ষেত্রে প্রযোজ্য।
আমি সম্প্রতি যে নিখুঁত সমাধানটি চেষ্টা করেছি তা হ'ল:
<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অন্যথায় আপনার ব্যবহারকারী শুরুতে দশমিকটি ভুলে গেলে কোনও "কী ফাঁদে" আটকে থাকতে পারে ( যখন "ম্যাক্সেলেন্থ" এট্রে পৌঁছে গিয়েছে তখন .সূচক এনে চেষ্টা করুন) )। তবে আপনি যদি কোনও অ্যাট্রিবিউট সেট করেন তবে এটি ফর্ম জমা দেওয়ার ক্ষেত্রে বৈধ হবে ।1<input type"text">max
আপনি যদি কোনও ফোন নম্বর সীমাবদ্ধ / বৈধ করার চেষ্টা করছেন তবে type="tel"অ্যাটর / মানটি ব্যবহার করুন । এটি maxLengthঅ্যাটরকে মান্য করে এবং কেবলমাত্র মোবাইল নম্বর কীবোর্ড নিয়ে আসে (আধুনিক ব্রাউজারগুলিতে) এবং আপনি কোনও প্যাটার্নে (যেমন pattern="[0-9]{10}") ইনপুট সীমাবদ্ধ করতে পারেন ।
ম্যাক্সলিংহ্ট - ইনপুট ধরণের পাঠ্য
<input type="email" name="email" maxlength="50">jQuery ব্যবহার:
$("input").attr("maxlength", 50)সর্বোচ্চ - ইনপুট ধরণের সংখ্যা
জাতীয়
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"এটি এইচটিএমএল 5 স্পেসিফিকেশন থেকে একটি নতুন টাইপ নোট করুন । আপনি যে ব্রাউজারে পরীক্ষা করছি শনাক্ত না করলেtype="number"এটা বিবেচনা করবে যেমনtype="text"যা করে সম্মানmaxlengthঅ্যাট্রিবিউট। এটি আপনার দেখা আচরণের ব্যাখ্যা দিতে পারে।