উত্তর:
এর মতো minবৈশিষ্ট্যটি ব্যবহার করুন :
<input type="number" min="0">আমি @ অভ্রবমের উত্তরে সন্তুষ্ট নই কারণ:
এটি কেবল নেতিবাচক সংখ্যাগুলি উপরে / নীচে তীরগুলি থেকে প্রবেশ করা থেকে বিরত ছিল , যেখানে ব্যবহারকারী কীবোর্ড থেকে নেতিবাচক সংখ্যা টাইপ করতে পারেন।
সমাধানটি মূল কোড সহ রোধ করা হয় :
// Select your input element.
var number = document.getElementById('number');
// Listen for input event on numInput.
number.onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}<form action="" method="post">
<input type="number" id="number" min="0" />
<input type="submit" value="Click me!"/>
</form>@ হুগ গিনির দ্বারা ব্যাখ্যা সরবরাহ করা হয়েছে :
কী কোডগুলি চেক করা হচ্ছে:
সুতরাং এই স্ক্রিপ্টটি ইনপুটটিতে অবৈধ কী প্রবেশ করা থেকে বিরত করছে।
min="0"।
|| (e.keyCode>36 && e.keyCode<41)এটি ব্যবহারকারীকে উপরে / ডাউন তীরের মাধ্যমে সংখ্যা বাড়িয়ে / হ্রাস করতে দেয় এবং সংখ্যা সম্পাদনা করতে ডান / বাম দিকে যেতে দেয় না।
আমার জন্য সমাধানটি ছিল:
<input type="number" min="0" oninput="this.value = Math.abs(this.value)"><input ng-model="row.myValue" type="{{row.code == 1 ? 'text' : 'number'}}" min="0" ng-pattern="..." noformvalidate oninput="if (this.type=='text') this.value=Math.abs(this.value) ">
এই কোডটি আমার পক্ষে ভাল কাজ করছে। আপনি কি চেক করতে পারেন:
<input type="number" name="test" min="0" oninput="validity.valid||(value='');">-আসলে কোনও ভাল ধারণা নয়।
<input type="number" name="test" min="0" oninput="validity.valid||(value=value.replace(/\D+/g, ''))">- এটি সমস্ত অ-
min="0"রেখেছি যে কোনও নেতিবাচক নেই। আপনি যদি নেতিবাচক মান করতে চান তবে এই বৈশিষ্ট্যটি সরান।
সহজ পদ্ধতি:
<input min='0' type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57">আমি দশমিক সংখ্যার অনুমতি দিতে চেয়েছিলাম এবং নেতিবাচক ইনপুট থাকলে পুরো ইনপুটটি সাফ করতে চাই না। এটি ক্রোমে অন্তত:
<input type="number" min="0" onkeypress="return event.charCode != 45">keypressএকটি
@ মনওয়াল উত্তরটি ভাল, তবে ভাল পাঠযোগ্যতার জন্য আমি কম লাইনের কোডের কোড পছন্দ করি। এছাড়াও আমি পরিবর্তে এইচটিএমএলে অনক্লিক / অনকাইপ্রেস ব্যবহার করতে চাই।
আমার প্রস্তাবিত সমাধান একই কাজ করে: যুক্ত করুন
min="0" onkeypress="return isNumberKey(event)"এইচটিএমএল ইনপুট এবং
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}একটি জাভাস্ক্রিপ্ট ফাংশন হিসাবে।
যেমন বলা হয়েছে, এটি একই কাজ করে। সমস্যাটি কীভাবে সমাধান করা যায় সে সম্পর্কে এটি কেবল ব্যক্তিগত পছন্দ।
কেবলমাত্র রেফারেন্সের জন্য: jQuery এর সাহায্যে আপনি নিম্নলিখিত কোডের সাথে ফোকাসআউটে নেতিবাচক মানগুলি ওভাররাইট করতে পারেন:
$(document).ready(function(){
$("body").delegate('#myInputNumber', 'focusout', function(){
if($(this).val() < 0){
$(this).val('0');
}
});
});এটি সার্ভারের পাশের বৈধতা প্রতিস্থাপন করে না!
এখানে একটি কৌণিক 2 সমাধান রয়েছে:
ওয়ালনম্বার একটি ক্লাস তৈরি করুন
import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector: '[OnlyNumber]'
})
export class OnlyNumber {
// Allow decimal numbers. The \. is only allowed once to occur
private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);
// Allow key codes for special events. Reflect :
// Backspace, tab, end, home
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];
constructor(private el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
// Allow Backspace, tab, end, and home keys
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
// Do not use event.keycode this is deprecated.
// See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
let current: string = this.el.nativeElement.value;
// We need this because the current value on the DOM element
// is not yet updated with the value from this event
let next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}App.module.ts এ ঘোষণাপত্রের মধ্যে কেবল সংখ্যাটি যুক্ত করুন এবং আপনার অ্যাপ্লিকেশনটিতে যে কোনও জায়গায় এটির মতো ব্যবহার করুন
<input OnlyNumber="true">oninput="this.value=(this.value < Number(this.min) || this.value > Number(this.max)) ? '' : this.value;"আপনি আরও বেশি কোড সহ এইচটিএমএলকে ময়লা করতে না চাইলে এটি করার আরও একটি উপায় যুক্ত করুন (কৌণিক ব্যবহার করে) :
আপনাকে কেবলমাত্র ক্ষেত্রের মান পরিবর্তন করতে হবে এবং মানটিকে একটি নিরঙ্কুশ মান হিসাবে সেট করতে হবে (নতুন ইভেন্ট নির্গত না হওয়ার বিষয়ে যত্ন নেওয়া কারণ এটি অন্য মানকে পরিবর্তিত করবে তাই একটি পুনরাবৃত্তি কল এবং সর্বাধিক কল আকারকে ত্রুটি ছাড়িয়ে যাবে)
এইচটিএমএল কোড
<form [formGroup]="myForm">
<input type="number" formControlName="myInput"/>
</form>টাইপস্ক্রিপ্ট কোড (আপনার উপাদান ভিতরে)
formGroup: FormGroup;
ngOnInit() {
this.myInput.valueChanges
.subscribe(() => {
this.myInput.setValue(Math.abs(this.myInput.value), {emitEvent: false});
});
}
get myInput(): AbstractControl {
return this.myForm.controls['myInput'];
}<input type="number" name="credit_days" pattern="[^\-]+"
#credit_days="ngModel" class="form-control"
placeholder="{{ 'Enter credit days' | translate }}" min="0"
[(ngModel)]="provider.credit_days"
onkeypress="return (event.charCode == 8 || event.charCode == 0 ||
event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <=
57" onpaste="return false">এর উত্তর সহায়ক নয়। এটি কেবলমাত্র যখন আপনি উপরে / ডাউন কীগুলি ব্যবহার করেন তখনই কাজ করে তবে আপনি যদি -11 টাইপ করেন তবে এটি কার্যকর হবে না। সুতরাং এখানে আমি ব্যবহার করছি একটি ছোট ফিক্স
এটি পূর্ণসংখ্যার জন্য
$(".integer").live("keypress keyup", function (event) {
// console.log('int = '+$(this).val());
$(this).val($(this).val().replace(/[^\d].+/, ""));
if (event.which != 8 && (event.which < 48 || event.which > 57))
{
event.preventDefault();
}
});এটি যখন আপনার দামের সংখ্যা থাকে
$(".numeric, .price").live("keypress keyup", function (event) {
// console.log('numeric = '+$(this).val());
$(this).val($(this).val().replace(/[^0-9\,\.]/g, ''));
if (event.which != 8 && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});এই সমাধানটি কীবোর্ড সহ অনুলিপি পেস্ট সহ সমস্ত কীবোর্ড কার্যকারিতা মঞ্জুরি দেয়। এটি মাউসের সাহায্যে নেতিবাচক সংখ্যাগুলি আটকানো রোধ করে। এটি কোডেসে সমস্ত ব্রাউজার এবং ডেমো দিয়ে কাজ করে বুটস্ট্র্যাপ এবং jQuery ব্যবহার করা হয়। এটি অ-ইংরেজি ভাষার সেটিংস এবং কীবোর্ডগুলির সাথে কাজ করা উচিত। যদি ব্রাউজারটি পেস্ট ইভেন্ট ক্যাপচার (আইই) সমর্থন করে না, তবে এটি ফোকাস আউট করার পরে নেতিবাচক চিহ্নটি সরিয়ে ফেলবে। এই সমাধানটি নূন্যতম = 0 টাইপ = সংখ্যা সহ নেটিভ ব্রাউজারের মতো আচরণ করে।
মার্কআপ:
<form>
<input class="form-control positive-numeric-only" id="id-blah1" min="0" name="nm1" type="number" value="0" />
<input class="form-control positive-numeric-only" id="id-blah2" min="0" name="nm2" type="number" value="0" />
</form>জাভাস্ক্রিপ্ট
$(document).ready(function() {
$("input.positive-numeric-only").on("keydown", function(e) {
var char = e.originalEvent.key.replace(/[^0-9^.^,]/, "");
if (char.length == 0 && !(e.originalEvent.ctrlKey || e.originalEvent.metaKey)) {
e.preventDefault();
}
});
$("input.positive-numeric-only").bind("paste", function(e) {
var numbers = e.originalEvent.clipboardData
.getData("text")
.replace(/[^0-9^.^,]/g, "");
e.preventDefault();
var the_val = parseFloat(numbers);
if (the_val > 0) {
$(this).val(the_val.toFixed(2));
}
});
$("input.positive-numeric-only").focusout(function(e) {
if (!isNaN(this.value) && this.value.length != 0) {
this.value = Math.abs(parseFloat(this.value)).toFixed(2);
} else {
this.value = 0;
}
});
});এখানে এমন একটি সমাধান রয়েছে যা আমার পক্ষে সবচেয়ে ভাল কাজ করেছে QTY ক্ষেত্রের জন্য যা কেবলমাত্র সংখ্যার অনুমতি দেয়।
// Only allow numbers, backspace and left/right direction on QTY input
if(!((e.keyCode > 95 && e.keyCode < 106) // numpad numbers
|| (e.keyCode > 47 && e.keyCode < 58) // numbers
|| [8, 9, 35, 36, 37, 39].indexOf(e.keyCode) >= 0 // backspace, tab, home, end, left arrow, right arrow
|| (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + A
|| (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + C
|| (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + X
|| (e.keyCode == 86 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + V
)) {
return false;
}If Number is Negative or Positive Using ES6’s Math.Sign
const num = -8;
// Old Way
num === 0 ? num : (num > 0 ? 1 : -1); // -1
// ES6 Way
Math.sign(num); // -1