วิธีทำให้ type =“ number” เป็นจำนวนบวกเท่านั้น

ปัจจุบันฉันมีรหัสต่อไปนี้

<input type="number" />

มันออกมาเป็นแบบนี้

สิ่งเล็ก ๆ ที่อยู่ทางด้านขวามือของตัวเลือกอนุญาตให้ตัวเลขไปสู่ลบ ฉันจะป้องกันได้อย่างไร

ฉันมีข้อสงสัยเกี่ยวกับการใช้type="number"มันทำให้เกิดปัญหามากกว่าที่จะแก้ฉันจะตรวจสอบสติอย่างไรก็ตามฉันควรกลับไปใช้type="text"หรือไม่

เพิ่มแอตทริบิวต์min

<input type="number" min="0">

ฉันพบวิธีแก้ไขปัญหาอื่นเพื่อป้องกันจำนวนลบ

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

ขึ้นอยู่กับว่าคุณต้องการเป็นอย่างไร คุณต้องการรับเฉพาะจำนวนเต็มมากกว่า:

<input type="number" min="1" step="1">

หากคุณต้องการให้มีทศนิยมสองหลักหลังจุดทศนิยม

<input type="number" min="0.01" step="0.01">

คุณสามารถบังคับให้อินพุตมีจำนวนเต็มบวกเท่านั้นโดยเพิ่มonkeypressภายในinputแท็ก

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

ที่นี่event.charCode >= 48ให้ความมั่นใจว่าจะส่งคืนเฉพาะตัวเลขที่มากกว่าหรือเท่ากับ 0 เท่านั้นในขณะที่minแท็กรับประกันว่าคุณจะได้รับอย่างน้อย 1 โดยการเลื่อนภายในแถบป้อนข้อมูล

คุณสามารถใช้สิ่งต่อไปนี้เพื่อให้type="number"ยอมรับตัวเลขที่เป็นบวกเท่านั้น:

input type="number" step="1" pattern="\d+"

คุณสามารถป้องกันการป้อนข้อมูลเชิงลบในรูปแบบการป้อนหมายเลขโดยต่อไปนี้:

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

ลอง

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

หากต้องการป้อนข้อความลวดลายก็ใช้ได้เช่นกัน

<input type="text" pattern="\d+">

ฉันไม่สามารถหาโซลูชันที่สมบูรณ์แบบได้เพราะมีบางงานสำหรับการป้อนข้อมูล แต่ไม่ใช่สำหรับการคัดลอกและวาง วิธีนี้ใช้ได้ผลสำหรับฉัน มันป้องกันจากจำนวนลบ, พิมพ์ "e", คัดลอกและวาง "e" ข้อความ

สร้างฟังก์ชั่น

<script language="JavaScript">

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
</script>

เพิ่มคุณสมบัติเหล่านี้เพื่อป้อนข้อมูล ทั้งสองนี้ป้องกันจากการคัดลอกและวางข้อความที่ไม่ใช่ตัวเลขรวมถึง "e" คุณต้องมีทั้งสองอย่างร่วมกันจึงจะมีผล

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

หากคุณกำลังใช้ Vue คุณสามารถดูคำตอบได้ที่นี่ ฉันได้แยกมันไปเป็นมิกซ์อินซึ่งสามารถนำกลับมาใช้ใหม่ได้

เพิ่มรหัสนี้ในประเภทอินพุตของคุณ

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

ตัวอย่างเช่น:

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

โซลูชันอื่น ๆ คือการใช้ Js เพื่อทำให้เป็นบวก (ตัวเลือกขั้นต่ำสามารถปิดการใช้งานและไม่ถูกต้องเมื่อผู้ใช้ประเภท smth) ลบหากไม่จำเป็นและเหตุการณ์ ('keydown') ยังสามารถใช้!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

ขึ้นอยู่กับว่าคุณต้องการฟิลด์ int หรือ float นี่คือสิ่งที่ทั้งสองจะมีลักษณะ:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

ฟิลด์ int มีการตรวจสอบความถูกต้องที่แนบมากับมันตั้งแต่ขั้นต่ำของมันคือ 1 สนามลอยรับ 0; เพื่อจัดการกับสิ่งนี้คุณสามารถเพิ่มตัวตรวจสอบข้อ จำกัดอีกหนึ่งตัว:

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddle ที่นี่

โปรดทราบว่าไม่มีวิธีการใดในการป้องกันผู้ใช้จากการพยายามพิมพ์ในการป้อนข้อมูลที่ไม่ถูกต้อง แต่คุณสามารถโทรcheckValidityหรือreportValidityเพื่อตรวจสอบว่าผู้ใช้พิมพ์ในการป้อนข้อมูลที่ถูกต้อง

แน่นอนคุณควรยังคงมีการตรวจสอบฝั่งเซิร์ฟเวอร์เพราะผู้ใช้สามารถละเว้นการตรวจสอบฝั่งไคลเอ็นต์

ลองสิ่งนี้:

• ทดสอบในเชิงมุม 8
• ค่าเป็นบวก
• รหัสนี้ยัง handels nullและnegitiveค่า

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

หากคุณพยายามป้อนหมายเลขติดลบเหตุการณ์ onkeyup จะบล็อกสิ่งนี้และหากคุณใช้ลูกศรที่หมายเลขอินพุตเหตุการณ์ onblur จะแก้ไขส่วนนั้น

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

ด้วยการป้อนข้อความประเภทคุณสามารถใช้สิ่งนี้เพื่อการตรวจสอบที่ดีขึ้น

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

ลองสิ่งนี้:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}