<ইনপুট টাইপ = "সংখ্যা"> এ 2 দশমিক স্থানের অনুমতি দিন

Question

আমার একটি রয়েছে <input type="number">এবং আমি ব্যবহারকারীদের ইনপুটটিকে দশমিক দশমিক দুটি স্থান পর্যন্ত বিশুদ্ধ নম্বর বা সংখ্যায় সীমাবদ্ধ রাখতে চাই।

মূলত, আমি একটি দাম ইনপুট চাইছি।

আমি রেজেক্স করা এড়াতে চেয়েছিলাম এটি করার কোন উপায় আছে?

<input type="number" required name="price" min="0" value="0" step="any">

Comments

প্রকার = "সংখ্যা" এর প্রশস্ত ব্রাউজার সমর্থন নেই। আপনি পছন্দসই ইনপুট পেয়েছেন তা নিশ্চিত করার জন্য কিছু জাভাস্ক্রিপ্ট সহ একটি পাঠ্যবক্স ব্যবহার করা ভাল।

— www139

হ্যাঁ, তবে ইনপুটগুলি type="text"যে কোনও উপায়েই ফিরে যায় , তাতে কী আসে যায়?

— Ultimater

এর সম্ভাব্য নকলটি কি এইচটিএমএল 5 এ কোনও ফ্লোট ইনপুট টাইপ আছে?

— ওহাদআর

/^\d+\.\d{2,2}$/ আমার জন্য 0.00 প্রয়োজনের জন্য কাজ করেছে

— জেডস্টোনডিপিএম

Answer 1

এর পরিবর্তে step="any", যে কোনও দশমিক স্থানের জন্য অনুমতি দেয়, ব্যবহার করুন step=".01", যা দুটি দশমিক স্থান পর্যন্ত অনুমতি দেয়।

বৈশিষ্টটিতে আরও বিশদ: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

Comments

এটি সঠিক উত্তর নয়। পদক্ষেপ কেবল তখনই নিয়ন্ত্রণ করে যখন আপনি ক্লিক বা প্রেস আপ করেন এবং এটি কোনও কিছুতেই সীমাবদ্ধ করে না।

— Ini থেকে

@ মিশেল_বি অনুমানের প্রত্যাশা ছাড়াই, এটি পরীক্ষা করা মোটামুটি তুচ্ছ: jsfiddle.net/9hvm0b5u এখনও 2 দশমিকেরও বেশি ইনপুট হতে দেয়। পদক্ষেপগুলি কেবল নিয়ন্ত্রণ করে যে +/- বোতামগুলি কী পরিমাণ পরিমাণ সরিয়ে দেয়। (ক্রোম)

— নাথন

@ মিশেল_বি ব্যবহারকারীকে 500.12345কোনও ইনপুট যেমন একটি সংখ্যা টাইপ করা থেকে বিরত নয় , সম্ভবত প্রয়োজনীয়তাগুলি সম্পর্কে আমাদের বোঝার ধারণা আলাদা।

— নাথন

এটি লক্ষ করা উচিত যে, ব্যবহারকারী দশমিক জায়গার পরে যেকোন সংখ্যা টাইপ করতে পারে, বেশিরভাগ ব্রাউজারগুলি একটি অবৈধ মান এবং সিএসএস নির্বাচকদের সাথে ফর্মটি জমা দেওয়ার অনুমতি দেয় না :validএবং :invalidপ্রত্যাশা অনুযায়ী প্রয়োগ করা হয়।

— অ্যান্ড্রু ডিনমোর

@ নাথান, এটি ব্রাউজারের বৈধতা যাচাই করাও তুচ্ছ। : অধিক 2 দশমিক স্থান দিয়ে একটি মান জমা দেওয়ার চেষ্টা jsfiddle.net/4yesgn7b

— imclean

Answer 2

যদি কেহ কোনও রেজেক্সের সন্ধান করে যা 2চ্ছিক 2 দশমিক স্থান সহ কেবলমাত্র সংখ্যার অনুমতি দেয়

^\d*(\.\d{0,2})?$

উদাহরণস্বরূপ, আমি মোটামুটি নির্ভরযোগ্য হতে নীচে সমাধান খুঁজে পেয়েছি

এইচটিএমএল:

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

জেএস / জিকুয়েরি:

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});

Comments

সেটটাইমআউট () করার উদ্দেশ্য কী?

— ডেরেক

@Derek। আমি ধরে নিলাম এটি তাই regex.test DOM- কে ব্লক করে না। এটি দেখুন: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

@ ডেরেক আমি কেবলমাত্র এটি ধরে নিতে পারি হ'ল সেটটি স্থাপনের আগে ইভেন্টটি সম্পূর্ণ হওয়ার setTimeout()জন্য অপেক্ষা করা (অন্যথায় এটি এর মতো হবে )। তবে 0 এর টাইমআউট সহ এটি অর্থহীন এবং কার্যকর হয় না কারণ উভয় মানই প্রায় একই থাকে (ফায়ারফক্সে)। উদাহরণস্বরূপ, আপনি যদি এটি 1 এ সেট করেন তবে এটি দুর্দান্ত কাজ করে। keydownnewValoldVal

— ই

সুতরাং, আপনি "অগ্রহণযোগ্য সম্পাদনা উত্তরের বিন্যাসের গুণমানকে হ্রাস করে" একটি কারণ সহ দুটি আলাদা পোস্টে আমার সম্পাদনাটি রোলব্যাক করেছেন। আপনি কী দয়া করে ব্যাখ্যা করতে পারেন যে আমার সম্পাদনাটি কীভাবে অনুমোদনহীন এবং কীভাবে এটি উত্তরের গুণমানকে হ্রাস করে? (আইএমও, এটি এর উন্নতি করে, যেহেতু লোকেরা সরাসরি পোস্ট থেকে কোড চালাতে পারে এবং তাদের জেএসফিডেলে যাওয়ার দরকার নেই)।

— ডাবল-বীপ

Answer 3

মুদ্রার জন্য, আমি পরামর্শ দেব:

<div><label>Amount $
    <input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

Http://jsfiddle.net/vx3axsk5/1/ দেখুন

HTML5 বৈশিষ্ট্যগুলি "পদক্ষেপ", "মিনিট" এবং "প্যাটার্ন" বৈধ হয়ে যাবে যখন ফর্মটি জমা দেওয়া হবে, অন্বলুর নয়। আপনার stepযদি দরকার হয় তবে আপনার প্রয়োজন নেই এবং আপনার কাছে patternএকটি patternথাকলে আপনার দরকার নেই step। সুতরাং আপনি step="any"আমার কোডটি দিয়ে ফিরে যেতে পারেন যেহেতু প্যাটার্নটি এটি যাইহোক বৈধ করে দেবে।

আপনি যদি অন্বলুরকে বৈধতা দিতে চান তবে আমি বিশ্বাস করি যে ব্যবহারকারীকে একটি ভিজ্যুয়াল কিউ দেওয়া ব্যাকগ্রাউন্ড লাল রঙ করার মতো সহায়ক। যদি ব্যবহারকারীর ব্রাউজারকে সমর্থন করে না type="number"এটি ফলব্যাক হবে type="text"। যদি ব্যবহারকারীর ব্রাউজারটি এইচটিএমএল 5 প্যাটার্নের বৈধতা সমর্থন করে না, তবে আমার জাভাস্ক্রিপ্ট স্নিপেট ফর্মটি জমা দেওয়া থেকে বিরত রাখে না, তবে এটি একটি ভিজ্যুয়াল ইঙ্গিত দেয়। সুতরাং, দুর্বল এইচটিএমএল সমর্থনযুক্ত লোক এবং জাভাস্ক্রিপ্ট অক্ষম করে বা এইচটিটিপি অনুরোধগুলি জাল করে ডেটাবেস হ্যাক করার চেষ্টা করছে এমন লোকদের জন্য আপনাকে আবারও সার্ভারে বৈধতা দেওয়ার প্রয়োজন। সম্মুখ-প্রান্তে বৈধতা সহ পয়েন্টটি আরও ভাল ব্যবহারকারীর অভিজ্ঞতার জন্য। সুতরাং যতক্ষণ না আপনার বেশিরভাগ ব্যবহারকারীর একটি ভাল অভিজ্ঞতা রয়েছে, কোডটি এখনও কাজ করবে এবং আপনি ব্যাক-এন্ডে যাচাই করতে পারবেন তবে এইচটিএমএল 5 বৈশিষ্ট্যগুলির উপর নির্ভর করা ঠিক আছে।

Comments

MDN এর মতে , এর patternজন্য কাজ করবেন না input type=number:<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs can't contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes, as explained above.

— izogfif

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

— Ultimater

Answer 4

পদক্ষেপ 1: আপনার এইচটিএমএল নম্বর ইনপুট বাক্সটিকে একটি অনুরুপ ইভেন্টে টানুন

myHTMLNumberInput.onchange = setTwoNumberDecimal;

বা এইচটিএমএল কোডে

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

পদক্ষেপ 2: setTwoDecimalPlaceপদ্ধতিটি লিখুন

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

toFixed()পদ্ধতিতে পাস করা মান পরিবর্তিত করে আপনি দশমিক স্থানের সংখ্যা পরিবর্তন করতে পারেন । MDN ডক্স দেখুন ।

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

Comments

parseFloat (parseFloat (this.value) .toFixed (2)); যদি আপনি দশমিক বা সংখ্যার প্রকার চান তবে আপনি ডিফল্টরূপে ফিক্সড () পদ্ধতিতে স্ট্রিংয়ের স্ট্রিং হিসাবে পার্সফ্লোয়েট () এ পুরো জিনিসটি মোড়ানো করতে পারেন।

— স্পেসদেব

Answer 5

আমি jQuery ব্যবহার করা আমার সেরা সমাধান ছিল।

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Answer 6

ইনপুট ধরণে মাত্র 2 দশমিক 10 মঞ্জুরি দেওয়ার জন্য এটি ব্যবহার করে দেখুন

<input type="number" step="0.01" class="form-control"  />

অথবা @ সামোহটিভিআইয়ের পরামর্শ অনুসারে jQuery ব্যবহার করুন

$( "#ELEMENTID" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Comments

এটি ক্রোম 57

— -তে দশমিকগুলি

এটি সঠিক নয়। পদক্ষেপ কেবল তখনই নিয়ন্ত্রণ করে যখন আপনি ক্লিক বা প্রেস আপ করেন এবং এটি কোনও কিছুতেই সীমাবদ্ধ করে না।

— Ini থেকে

পদক্ষেপটি 1.000 এর মতো নম্বর প্রবেশ করা থেকেও বাধা দেয়।

— Zapnologica

Answer 7

এই কোড ব্যবহার করুন

<input type="number" step="0.01" name="amount" placeholder="0.00">

ডিফল্টরূপে এইচটিএমএল 5 ইনপুট উপাদানগুলির জন্য ধাপের মান হ'ল ধাপ = "1"।

Answer 8

শুধু লেখো

<input type="number" step="0.1" lang="nb">

lang = 'এনবি "আপনাকে কমা বা পিরিয়ড সহ দশমিক সংখ্যা লিখতে দেয়

Comments

"ল্যাং = 'এনবি' আপনাকে কমা বা পিরিয়ড সহ দশমিক সংখ্যা লিখতে দেয়" অন্য কোনও কিছুর জন্য কথা বলতে পারে না, তবে এটি আমার পক্ষে ক্রোমে কাজ করে না।

— অ্যান্ড্রু ডিনমোর

Answer 9

ইনপুটটিতে:

step="any"
class="two-decimals"

স্ক্রিপ্টে:

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});

Comments

আপনার পোস্টে স্লুর ব্যবহার এড়াতে দয়া করে। এবং সুন্দর হতে

— জেমস