এইচটিএমএল 5 নাম্বার উপাদানটিতে আমি কীভাবে সম্ভব ইনপুটগুলি সীমাবদ্ধ করতে পারি?


359

জন্য <input type="number">উপাদান maxlengthকাজ করছে না। আমি কীভাবে maxlengthএই সংখ্যার উপাদানটির জন্য সীমাবদ্ধ রাখতে পারি ?


5
লোকেরা আরও ভাল সমাধান খুঁজছেন, এটি সেরা: স্ট্যাকওভারফ্লো
প্রশ্নগুলি

4
সর্বাধিক বৈশিষ্ট্যটি অ্যান্ড্রয়েড ট্যাবলেটে ক্রোম ব্রাউজারে কাজ করে না।
চিরকাল

4
@ আনসালকর্কমজ: এই সমাধানটির অসুবিধা রয়েছে যে এটি অ্যান্ড্রয়েড ডিভাইসে কীপ্যাড সংখ্যাটি আনবে না
উইল

উত্তর:


340

এবং আপনি maxএমন একটি বৈশিষ্ট্য যুক্ত করতে পারেন যা সন্নিবেশ করতে পারে এমন সর্বোচ্চ সম্ভাব্য সংখ্যা নির্দিষ্ট করবে specify

<input type="number" max="999" />

আপনি যদি একটি maxএবং minমান উভয় যোগ করেন তবে আপনি অনুমোদিত মানগুলির ব্যাপ্তি নির্দিষ্ট করতে পারেন:

<input type="number" min="1" max="999" />

উপরে বর্ণিত ব্যবহারকারীরা নির্দিষ্ট ব্যাপ্তির বাইরে ম্যানুয়ালি মান প্রবেশ করা থেকে বিরত থাকবে না । পরিবর্তে তিনি একটি পপআপ প্রদর্শিত হবে যা তাকে এই স্ক্রিনশটে প্রদর্শিত ফর্মটি জমা দেওয়ার পরে এই সীমার মধ্যে একটি মান লিখতে বলছে:

এখানে চিত্র বর্ণনা লিখুন


4
ক্রিস্টার, এই কাজ। এছাড়াও @ অ্যান্ডি যেমন বলেছিলেন আমি অতিরিক্ত নম্বরগুলি স্লাইস করতে অনিনপুট ব্যবহার করেছি। উল্লেখ mathiasbynens.be/notes/oninput
প্রসাদ

7
@ প্রসাদ - অ্যান্ডির উত্তর যদি সঠিক হয় তবে সর্বাধিক আপ করা ভোটের পরিবর্তে এটি নির্বাচন করুন।
মোশে

81
এটি সঠিক, তবে অ্যান্ডির হিসাবে উল্লেখ করা উচিত যে এটি একটি দীর্ঘ সংখ্যা টাইপ করা বাধা দেয় না। সুতরাং এটি কোনও পাঠ্য ক্ষেত্রে সর্বাধিক দৈর্ঘ্যের সমতুল্য নয়।
ডিএ

9
আপনি যদি কেবল উচ্চতর নির্ভুলতা ভাসা প্রবেশ করে থাকেন তবে এটি ভেঙে যাবে। উদাহরণস্বরূপ 3.1415926 এটি কাছাকাছি পায় কারণ এটি 999 এর চেয়ে কম এবং 1. এর চেয়ে বেশি
0112

44
আমি জানি না কেন এটি এতটা আপভোটেড এবং স্বীকৃত কেন যখন এটি সহজভাবে কাজ করে না! এটা শুধুমাত্র "স্পিনার" নিয়ন্ত্রণ প্রভাবিত করে, এবং কিছুই ব্যবহারকারী একটি দীর্ঘ সংখ্যা টাইপ থামাতে নেই।
Codemonkey

115

আপনি সেই বৈশিষ্ট্য minএবং maxবৈশিষ্ট্যগুলি নির্দিষ্ট করতে পারেন যা কেবলমাত্র একটি নির্দিষ্ট ব্যাপ্তির মধ্যেই ইনপুটটিকে মঞ্জুরি দেয়।

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

এটি কেবল স্পিনার নিয়ন্ত্রণ বোতামের জন্য কাজ করে। যদিও ব্যবহারকারী অনুমতিপ্রাপ্তের চেয়ে বড় সংখ্যা টাইপ করতে সক্ষম হতে পারেন maxতবে ফর্মটি জমা দেওয়া হবে না।

সর্বাধিকের চেয়ে বেশি সংখ্যার জন্য ক্রোমের বৈধতা বার্তা
ক্রোম 15 থেকে নেওয়া স্ক্রিনশট

আপনি জাভাস্ক্রিপ্টে এইচটিএমএল 5 ইভেন্টটি অক্ষরের সংখ্যা সীমাবদ্ধ করতে ব্যবহার করতে পারেন oninput:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

11
জাভাস্ক্রিপ্ট পদ্ধতির সাথে একটি সম্ভাব্য সমস্যা: যদি সন্নিবেশ বিন্দুটি মানটির শেষে না থাকে তবে এটি আশানুরূপভাবে কাজ করতে পারে না। উদাহরণস্বরূপ, আপনি যদি ইনপুট ক্ষেত্রে "1234" মানটি প্রবেশ করেন, তবে সন্নিবেশ পয়েন্টটি মানের শুরুতে ফিরে যান এবং "5" টাইপ করুন, আপনি "5123" মানটি দিয়ে শেষ করবেন। এটি 4 টির সর্বোচ্চ দৈর্ঘ্যের ইনপুট টাইপ = "পাঠ্য" ক্ষেত্রের চেয়ে আলাদা, যেখানে ব্রাউজার আপনাকে "পূর্ণ" ক্ষেত্রে কোনও 5 তম অক্ষর টাইপ করতে দেয় না এবং মানটি "1234" থাকবে remain
জন স্নাইডার

@ অ্যান্ডি, অবশ্যই প্রশ্নটি করার জন্য একটি নন-জেএস maxlength
উপায়ের সন্ধান করছে

4
@ পেসারিয়র: আমার উত্তরে এমন কিছু হয়েছে যা আমি অন্যথায় ভাবলাম? যেমন আপনি দেখতে পাচ্ছেন, আমি কেবলমাত্র এইচটিএমএল ব্যবহার করেই অর্জন করা যেতে পারে এমন নিকটতম সম্ভাব্য সমাধানটি দিয়েছিলাম, জাভা স্ক্রিপ্ট ব্যবহার করে এমন একটি অতিরিক্ত পরামর্শের সাথে যেখানে ওপি অনুমতিপ্রাপ্তের চেয়ে বেশি অক্ষর টাইপ করে ব্যবহারকারীদের আটকাতে চেয়েছিল।
অ্যান্ডি ই

84

আপনি যদি এমন কোনও মোবাইল ওয়েব সলিউশন সন্ধান করছেন যাটিতে আপনি আপনার ব্যবহারকারীকে পূর্ণ পাঠ্য কীবোর্ডের চেয়ে একটি নম্বর প্যাড দেখতে চান। প্রকার = "টেল" ব্যবহার করুন। এটি সর্বোচ্চ দৈর্ঘ্যের সাথে কাজ করবে যা আপনাকে অতিরিক্ত জাভাস্ক্রিপ্ট তৈরি থেকে বাঁচায়।

সর্বাধিক এবং ন্যূনতম ব্যবহারকারীর সর্বাধিক এবং ন্যূনতম পরিমাণে সংখ্যায় টাইপ করার মঞ্জুরি দেয় যা সর্বোত্তম নয়।


3
দুর্দান্ত সন্ধান করুন, এটি একটি মোহনগুলির মতো কাজ করেছে, অতিরিক্ত জাভাস্ক্রিপ্ট তৈরি না করার জন্য থাম্বস আপ করে।
দিয়েগো

9
আমি খুঁজে পেয়েছি যে এটি সংখ্যার ইনপুটটির জন্য সেরা সমাধান নয় কারণ একটি "টেল" ইনপুট অতিরিক্ত চিহ্নগুলির জন্য অনুমতি দেয় এবং এটি প্রতিটি সংখ্যার পাশে অক্ষর প্রদর্শন করে। বিশুদ্ধরূপে সংখ্যাসূচক কীবোর্ডটি আরও পরিষ্কার দেখাচ্ছে।
হাওখারিস

@ হাওখারিস আপনি সঠিক, টাইপ = "সংখ্যা" হ'ল ক্লিনার ইউআই। দুর্ঘটনাক্রমে একটি খারাপ চরে টাইপ করা সহজ। ব্যবহারকারী অতিরিক্ত ডেটা প্রবেশ না করে তা নিশ্চিত করার জন্য অতিরিক্ত বৈধতা প্রয়োজন। তবে এটিকেও বিবেচনা করুন যে ব্যবহারকারী কোনও সংখ্যা কীবোর্ডের সাথে সহজেই সমস্ত দশমিক পয়েন্ট প্রবেশ করতে পারে। এছাড়াও এটি অতিরিক্ত জাভাস্ক্রিপ্ট ছাড়া উপরের প্রশ্নের সমাধান করে না।
ডুয়েন

1
আপনাকে ধন্যবাদ, আমি আয়নিক কাঠামো মোবাইল অ্যাপ্লিকেশনটিতে কাজ করছি এবং এটি আমার সমস্যার সমাধান করেছে
আহমেদ

1
যদি প্যাটার্ন = "[0-9] *" দিয়ে ব্যবহৃত হয় তবে অতিরিক্ত চিহ্নগুলি অক্ষম হয়ে যাবে
এপ্রেইরা

71

আপনি এইগুলির মতো এই সমস্তগুলি একত্রিত করতে পারেন:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>


আপডেট:
আপনি কোনও অ-সংখ্যাসূচক অক্ষর প্রবেশ করানোও আটকাতে চাইতে পারেন, কারণ object.lengthসংখ্যার ইনপুটগুলির জন্য খালি স্ট্রিং হবে এবং তাই এর দৈর্ঘ্য হবে 0। সুতরাং maxLengthCheckফাংশন কাজ করবে না।

সমাধান: উদাহরণগুলির জন্য এটি বা এটি
দেখুন ।

ডেমো : - এখানে কোডের পূর্ণ সংস্করণ দেখতে
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

আপডেট 2: আপডেটের কোডটি এখানে: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

আপডেট 3: দয়া করে নোট করুন যে দশমিকের চেয়ে বেশি পয়েন্ট প্রবেশের অনুমতি দেওয়ার সাথে অঙ্কের মানটি গোলমেলে যেতে পারে।


এটি একটি ভাল সমাধান, তবে আমি খুঁজে পাই যে অবজেক্টটি val মান: দৈর্ঘ্য 0 প্রদান করে যদি কোনও অ-সংখ্যাযুক্ত মান প্রবেশ করা হয়।
অ্যান্ড্রু

1
@ অ্যান্ড্রুস্পিয়ার এর কারণ এটি হ'ল অবজেক্ট.ভ্যালু একটি খালি স্ট্রিং হবে যদি আপনি এক ধরণের 'নম্বর' সেট দিয়ে ইনপুটগুলিতে অ-সংখ্যািক মান প্রবেশ করেন। ডকুমেন্টেশন দেখুন। এছাড়াও, দয়া করে এই সমস্যাটি সমাধান করার জন্য আমার আপডেটটি পড়ুন।
ডেভিড রেফুয়া

111..1111 এর মতো আপনি যদি এক দশমিক বিন্দুতে বেশি ইনপুট করেন তবে এটি এখনও বিরতি। সুরক্ষার জন্য এই কোডটি ব্যবহার করবেন না, কারণ দূষিত কোডটি এখনও পাস হতে পারে।
পাইবি

@ পাইবি ডুড, এই কোডটি 3+ বছর আগের জন্য। পরিবর্তে jQuery ব্যবহার করুন।
ডেভিড রেফুয়া

1
হ্যাঁ, আমি এটি জানি, তবে নতুনরা এখনও এটি অনুলিপি করতে পারেন।
পাইবি

26

এটি খুব সহজ, কিছু জাভাস্ক্রিপ্টের সাহায্যে আপনি একটি অনুকরণ করতে পারেন maxlength, এটি পরীক্ষা করে দেখুন:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

12
আপনার সমাধানের সাহায্যে আপনি একবার 2 অক্ষর পৌঁছে ব্যাকস্পেস ব্যবহার করতে পারবেন না। তবে আমি কার্যকরী সমাধানের জন্য কয়েকটি জিনিস মিস করছি
ক্রিস্টোফ দেবোভ

12
OnKeyDowny এর পরিবর্তে আপনার onPress কী ব্যবহার করা উচিত।
রূপেশ অরোরা

1
আপনি পাঠ্যটি হাইলাইট করলেন এবং একটি অক্ষর
টিপলে

এটি নিম্নলিখিত কীগুলি থেকে নেই যদি বৈধ করুন stackoverflow.com/a/2353562/1534925
অক্ষয়

3
সমস্যাটি keydownহ'ল আপনি সর্বোচ্চ অক্ষরে ব্যাকস্পেস ব্যবহার করতে পারবেন না। সমস্যাটি keypressহ'ল আপনি সর্বোচ্চ অক্ষরের বাইরেও + কপি করতে পারেন।
স্ট্যাভম

23

অথবা যদি আপনার সর্বাধিক মান উদাহরণস্বরূপ 99 এবং সর্বনিম্ন 0 হয় তবে আপনি এটি ইনপুট উপাদানটিতে যুক্ত করতে পারেন (আপনার মানটি আপনার সর্বোচ্চ মান ইত্যাদির মাধ্যমে আবার লিখতে হবে))

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

তারপরে (আপনি যদি চান), আপনি ইনপুটটি আসলেই নম্বর কিনা তা পরীক্ষা করতে পারেন


... দুর্দান্ত, তবে আপনাকে আর কমপক্ষে এবং সর্বাধিক ডুড দরকার নেই। (কেবল বলছি)
xoxel

2
আপনি যদি সতর্কতা বার্তাটি এখনও প্রদর্শন করতে চান তবে @xoxel আপনি করেন
DNKROZ

এটি সত্যিই দুর্দান্ত ... ধন্যবাদ
ভিনসি ওমেন

onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
জেনারালাইজেশনের

18

আপনি এটি পাঠ্য হিসাবে নির্দিষ্ট করতে পারেন, তবে পেট্রন যুক্ত করুন, কেবল এটির মিলবে:

<input type="text" pattern="\d*" maxlength="2">

এটি নিখুঁত এবং মোবাইলেও কাজ করে (আইওএস 8 এবং অ্যান্ড্রয়েডে পরীক্ষিত) নম্বর কীবোর্ডকে আউট করে।


প্যাটার্ন বৈশিষ্ট্যটি
আইই

হ্যাঁ, নির্দেশ করার জন্য ধন্যবাদ, তবে আমরা IE9 সমর্থন বাদ দিয়েছি (এটি থেকে সরিষা কাটা), এবং আমি এটিকে জেএস পদ্ধতির চেয়ে বেশি পছন্দ করি। প্রকল্পের উপর নির্ভর করে।
ক্রিস Panayotoff

2
কোনও ব্যবহারকারী এটির সাথে অ-সংখ্যাসূচক অক্ষর প্রবেশ করতে বাধা দেয় না। তারা যে কোনও চরের 2 টি প্রবেশ করতে পারে। patternশুধুমাত্র বৈধতা হাইলাইট ঘটায়।
brt

অ্যান্ড্রয়েড 9 (নোকিয়া 8) এ পরীক্ষিত তবে আমি নিয়মিত কীবোর্ড
পেয়েছি

14

//For Angular I have attached following snippet.
<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

আপনি যদি "অ্যানকিপ্রেস" ইভেন্টটি ব্যবহার করেন তবে আপনি বিকাশের সময় কোনও ব্যবহারকারীর সীমাবদ্ধতা পাবেন না (ইউনিট এটি পরীক্ষা করুন)। এবং যদি আপনার এমন প্রয়োজনীয়তা থাকে যা ব্যবহারকারীকে নির্দিষ্ট সীমাবদ্ধতার পরে প্রবেশ করতে দেয় না তবে এই কোডটি একবার দেখুন এবং একবার চেষ্টা করুন।


1
আমি এখানে যে সমস্যাগুলি দেখছি তা হ'ল: ১. পাঠ্য নির্বাচন করে প্রতিস্থাপন করুন এবং প্রকারটি যদি কাজ করে না তবে ইনপুটটি numbers সংখ্যাতে পৌঁছেছে ২. যখন ওভারফ্লো "বোর্ডার" হিট কাজ করে তখন ইনপুট বাড়িয়ে -> 9999999 এবং ক্লিক করুন আপ বোতাম। সীমাবদ্ধতা
ভঙ্গ করে

আমি সাধারণ সংস্করণ জাভাস্ক্রিপ্ট দিয়ে চেষ্টা করেছি। আপনি চাইলে রান কোড স্নিপেট ব্যবহার করে দেখতে পারেন। এর মতো আমি কোনও সীমাবদ্ধতা পাইনি।
প্রসাদ শিন্ডে

1
কোনও সীমাবদ্ধতাও খুঁজে পায়নি। এটি 7 অঙ্কে থামে। আমি আমার কোডের জন্য এই সমাধানটি ব্যবহার করছি।
ক্লদিও

একটি সীমাবদ্ধতা আছে। আপনি যখন সীমাটি চাপান তখন সমস্তটি নির্বাচন করুন এবং সেগুলি প্রতিস্থাপন করতে চান এটি কার্যকর হয় না। প্রতিস্থাপনটি তখনই আমার জন্য কাজ করে যখন আমি মিথ্যা ফেরত আসার আগে আমি কার্য দিয়ে মানটি ওভাররাইট করি।
অনিদ্রা

@ ইনসোনিয়া ৮৮, @ এডুব যদি আমরা ফাংশন লিখি এবং প্রয়োজনীয় শর্তাদি যাচাই করি ...
প্রসাদ শিন্ডে

12

আরেকটি বিকল্প হ'ল সর্বাধিক বৈশিষ্ট্যযুক্ত কোনও কিছুর জন্য শ্রোতা যুক্ত করা এবং এতে স্লাইস মান যুক্ত করা। ধরে নিচ্ছি ব্যবহারকারী ইনপুট সম্পর্কিত প্রতিটি ইভেন্টের ভিতরে কোনও ফাংশন ব্যবহার করতে চায় না। এখানে একটি কোড স্নিপেট। সিএসএস এবং এইচটিএমএল কোডটি উপেক্ষা করুন, জাভাস্ক্রিপ্টটি গুরুত্বপূর্ণ।

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>


10

সর্বোচ্চ দৈর্ঘ্যটি <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"
 />

মোহন মত কাজ!
সিবওভিজি

9

বলুন আপনি সর্বাধিক অনুমোদিত মানটি 1000 হতে চেয়েছিলেন - হয় টাইপ করুন বা স্পিনার দিয়ে।

আপনি ব্যবহার করে স্পিনার মান সীমাবদ্ধ: type="number" min="0" max="1000"

এবং জাভাস্ক্রিপ্টের সাহায্যে কী-বোর্ড দ্বারা টাইপ করা হয়েছে তা সীমাবদ্ধ করুন: onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

8

অন্যদের দ্বারা যেমন বলা হয়েছে, ন্যূনতম / সর্বোচ্চ সর্বোচ্চ দৈর্ঘ্যের সমান নয় কারণ লোকেরা এখনও এমন একটি ভাসা প্রবেশ করতে পারে যা আপনার ইচ্ছা সর্বাধিক স্ট্রিং দৈর্ঘ্যের চেয়ে বড় হবে। প্রকৃতপক্ষে সর্বোচ্চ দৈর্ঘ্যের বৈশিষ্ট্যটি অনুকরণ করতে, আপনি একটি চিমটি এ জাতীয় কিছু করতে পারেন (এটি সর্বোচ্চ দৈর্ঘ্যের = "16" এর সমান):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

স্লাইস-এর মধ্যে whenোকানো হলে শেষ ব্যবহারকারী জ্ঞান ছাড়াই অক্ষরগুলি মুছবে। যদিও সর্বোচ্চ দৈর্ঘ্য অবরুদ্ধ হবে।
প্রদীপ কুমার প্রবহরন

@ প্রদীপকুমারপ্রবাহন maxlengthসংখ্যা ইনপুট দ্বারা সমর্থিত নয়। আমার উদাহরণস্বরূপ, value.slice(0,16)ইনপুট মান 16 টি অক্ষরের চেয়ে দীর্ঘ না হওয়া পর্যন্ত আরম্ভ করবে না।
thdoan

হ্যাঁ দৈর্ঘ্য সংখ্যা ইনপুটগুলির জন্য সমর্থিত নয় .. এই কোডটি গুড তবে এই কোডটি সর্বোচ্চ দৈর্ঘ্যের সম্পত্তির সাথে ঠিক মেলে না ..
প্রদীপ কুমার

@ টোবিয়াস গার্টনার এর type="number"যত্ন নেবে :)।
thrdan

@ 10basetom ... ব্রাউজারের উপর নির্ভর করে ... যেমন এফএফ এ আপনি এখনও অক্ষর প্রবেশ করতে পারেন এবং তারা সীমা ছাড়ার পরে থামবে না - তবে ধরণের সংখ্যার ধারণার সাথে সম্পর্কিত এটি একটি গ্রহণযোগ্য সমাধান।
টোবিয়াস গার্টনার

6

মায়কো মৌরার উত্তরটি একটি ভাল শুরু ছিল। যাইহোক, তার সমাধানটির অর্থ হ'ল আপনি যখন দ্বিতীয় অঙ্কটি প্রবেশ করেন তখন ক্ষেত্রের সমস্ত সম্পাদনা বন্ধ হয়ে যায়। সুতরাং আপনি মান পরিবর্তন করতে বা কোনও অক্ষর মুছতে পারবেন না।

নিম্নলিখিত কোডটি 2 এ থামে, তবে সম্পাদনা চালিয়ে যেতে দেয়;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

2
নাঃ। একটি মান পেস্ট করার চেষ্টা করুন।
কিওয়ারটি

6

আমার আগে এই সমস্যা ছিল এবং আমি এটি এইচটিএমএল 5 নম্বর টাইপ এবং জ্যাকুয়েরির সংমিশ্রণটি দিয়ে সমাধান করেছি solved

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

লিপি:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

আমি জানি না যে ঘটনাগুলি কিছুটা ওভারকিল হয় তবে এটি আমার সমস্যার সমাধান করে। JSfiddle


আপনি সহজেই অক্ষরগুলি এতে
জেসিকা

4

এইচটিএমএল ইনপুট

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery এর

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

4

সংখ্যা ইনপুটগুলির জন্য সর্বোচ্চতা নির্ধারণের একটি সহজ উপায় হ'ল:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

অ্যান্ড্রয়েড ক্রোমে কাজ করে না। onkeypress এর সাথে কিছু সমস্যা রয়েছে।
আকাশ ঠাকুর

3

হিসাবে type="number", আপনি সম্পত্তি maxপরিবর্তে একটি নির্দিষ্ট করুন maxlength, যা সর্বাধিক সম্ভাব্য সংখ্যা। 4 সংখ্যার সাথে , 5 টি সংখ্যা এবং অন্যান্য maxহওয়া উচিত ।999999999

এছাড়াও আপনি যদি এটি নিশ্চিত করতে চান যে এটি একটি ধনাত্মক সংখ্যা, আপনি সেট করতে পারেন min="0", ইতিবাচক সংখ্যাগুলি নিশ্চিত করে।


3

বিতৃষ্ণা। এটি এর মতো যে কেউ এটি প্রয়োগের অর্ধেক পথ ছেড়ে দিয়েছে এবং ভেবেছিল যে কেউ তা খেয়াল করবে না।

যে কারণেই হোক না কেন, উপরের উত্তরগুলি minএবং maxগুণাবলী ব্যবহার করে না । এই jQuery এটি শেষ:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

আপনার যদি সেই "jQuery-is-the-شیطان" প্রকারগুলির মধ্যে একটি হয় তবে এটি সম্ভবত একটি নামযুক্ত ফাংশন "অনিনপুট" w / o jQuery হিসাবেও কাজ করবে।


এটি প্রশ্নের সঠিক উত্তর দেয় না, তবে এটি আমার সমস্যার সমাধান করার সাথে
সাথেই

2

আমি খুঁজে পাওয়া যায় নি তোমাদের কেউ ব্যবহার করতে পারবেন না onkeydown, onkeypressবা onkeyupমোবাইল ব্রাউজারে সহ সম্পূর্ণ সমাধান জন্য ইভেন্ট নেই। যাইহোক, অ্যান্ড্রয়েডের জন্য ক্রোম / অপেরাতেonkeypress আর অবহিত করা হয় না এবং দেখুন (দেখুন: ইউআই ইভেন্টস ডাব্লু 3 সি ওয়ার্কিং ড্রাফ্ট, 04 আগস্ট 2016 )।

আমি oninputকেবল ইভেন্টটি ব্যবহার করে একটি সমাধান বের করেছি । নেতিবাচক / ধনাত্মক চিহ্ন বা দশমিক এবং হাজার বিভাজক এবং এর মতো প্রয়োজনীয় হিসাবে অতিরিক্ত সংখ্যার চেকিং আপনাকে করতে হতে পারে তবে শুরু হিসাবে নিম্নলিখিতটি যথেষ্ট হবে:

function checkMaxLength(event) {
	// Prepare to restore the previous value.
	if (this.oldValue === undefined) {
		this.oldValue = this.defaultValue;
	}

	if (this.value.length > this.maxLength) {
		// Set back to the previous value.
		this.value = oldVal;
	}
	else {
		// Store the previous value.
		this.oldValue = this.value;
		
		// Make additional checks for +/- or ./, etc.
		// Also consider to combine 'maxlength'
		// with 'min' and 'max' to prevent wrong submits.
	}
}

আমি উপরে একাধিকবার উল্লিখিত ভুল দাখিলের maxlengthসাথে একত্রিত হওয়ার minএবং maxপ্রতিরোধ করারও পরামর্শ দেব would


2
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

বা আপনি যদি সক্ষম হতে চান তবে কিছুই প্রবেশ করান না

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

1

দৈর্ঘ্যের সীমাবদ্ধতার সাথে সংখ্যাগত ইনপুটটির জন্য আপনি এটিও চেষ্টা করতে পারেন

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

ভুল টাইপের জন্য উত্তরটি সংশোধন করেছেন।
shinobi

1

আমি জানি ইতিমধ্যে একটি উত্তর রয়েছে, তবে আপনি যদি চান যে আপনার ইনপুটটি 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();

আপনি কি আমাকে আলোকিত করতে পারবেন? আমি আপনার কোডটি ব্যবহার করেছি এবং এটি "B" "(এটি) .attr (" সর্বোচ্চ দৈর্ঘ্য ")" সর্বদা প্রদান করে AND এবং "$ (এটি) .attr (" সর্বোচ্চ দৈর্ঘ্য ")" ব্যবহার করা কেন ভাল in " এটি যদি আমি পরীক্ষিত "প্রত্যাশিত দৈর্ঘ্যের" পরিবর্তে কাজ করছিলাম যা প্রত্যাশার মতো কাজ করছিলাম এবং আরও ছোট এবং ইমোও পড়তে আরও পরিষ্কার হয়? আমি কিছু মিস করেছি?
মার্কাস এর

"বিতরণ 2" এর অর্থ কী?
ফিল্ল_টি

আমার ক্ষমা প্রার্থনা করুন। "this.maxLength" কেবল কীডাউন ফাংশনের সুযোগে কাজ করছে। ফাংশন "অ্যাডম্যাক্স" "এ" হ'ল প্রত্যাশিত উপাদানটির চেয়ে ডকুমেন্ট এবং অতএব বিভিন্ন বৈশিষ্ট্যযুক্ত মান রয়েছে। পরিবর্তে আমি কীভাবে নম্বর ইনপুটটিতে অ্যাক্সেস পাব? উপরের কোডটি কি সত্যিই আপনার পক্ষে কাজ করছে? আমি ক্রোম / অপেরা / ভিভালদি, ফায়ারফক্স, এজ, আইই এবং সাফারি দিয়ে পরীক্ষা করেছি এবং প্রতিটি ব্রাউজারে একই ফলাফল পেয়েছি। ঠিক আছে, এজ সর্বোচ্চে = "1" এবং সর্বোচ্চ দৈর্ঘ্য = "2" যেখানে সত্যই কাজ করছে কিন্তু "$ (এই) .attr (" সর্বোচ্চ দৈর্ঘ্য ")" কোনও উচ্চ সংখ্যার জন্য আর বাড়বে না !!? @ কেউবা: কোন পরামর্শ?
মার্কাস এর

যেমনটি আমি বলেছিলাম এটি সর্বদাই দুটি কারণ কারণ এটি যখন আমি ডিবাগ করছিলাম তখন আমি জানতে পেরেছিলাম যে প্রশ্নে উপাদানটির পরিবর্তে ডকুমেন্টটিতে এটি ডাকা হয়েছিল। উপায় দ্বারা আপনিও
মার্কাসের


0

এটি কাউকে সাহায্য করতে পারে।

সামান্য জাভাস্ক্রিপ্টের সাহায্যে আপনি সমস্ত ডেটটাইম-লোকাল ইনপুট অনুসন্ধান করতে পারেন, ব্যবহারকারী যে বছর ইনপুট দেওয়ার চেষ্টা করছে তা অনুসন্ধান করুন, ভবিষ্যতে এটি 100 বছরেরও বেশি:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.