แจก!!! Textbox รับค่าเฉพาะตัวเลข numeric js function พร้อมตัวอย่างการใช้งาน

Download


แจกโค้ด jQuery สำหรับสำหรับรับทำให้ Textbox รับค่าเฉพาะตัวเลข รองรับการปรับแต่ง รับค่า และกำหนด ตำแหน่งของ ทศนิยม และตัวเลขแบบติดลบได้ ตามตัวอย่างด้านล่างนี้

See the Pen Jquery Input number only by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

รูปภาพประกอบตัวอย่างการใช้งาน numeric js function

จากตัวอย่างด้านบน เมื่อราทำการกรอกข้อมูล Textbox สองช่องด้านบน คือ Textbox แบบมาตรฐาน ไม่ได้เรียกใช้งานงาน function .numeric จะสังเกตุได้ ถึงแม้ว่า Textbox ช่องที่ 2 จะระบุประเภทเป็น number ก็ตามก็ยังไม่สามารถกรอกข้อมูลตัวเลขที่ถูกต้องได้ แต่ Textbox ช่องที่ 3 ที่เรียกใช้ Function Numeric js สามารถกรอกตัวเลขได้อย่างถูกต้อง

---

ตัวอย่างการเขียนโค้ด

เราสามารถเรียกใช้งาน jQuery โดยเพิ่ม code script ลงไปใน Tag <header>....</header> ตามรูปด้านล่าง และเพื่อเพิ่มความสวยงามให้กับ Form เราสามารถเรียกใช้ Bootstarp css ได้อีกด้วย

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin="anonymous"></script>
<script src="js/jquery.numeric.js" crossorigin="anonymous"></script>

Code ส่วนของ HTML สำหรับสร้าง Radio button และ Textbox

<div class="container1">
    <div class="row example-box">
        <h1>Textbox กอรอกได้เฉพาะตัวเลข</h1>
        <div class='col-sm-12'>
            <div class="form-group">
                <h2>Input type "text"</h2>
                <input type="text" class="normal-text form-control" placeholder="Text box">
            </div>
        </div>
        <div class='col-sm-12'>
            <div class="form-group">
                <h2>Input type "Number"</h2>
                <input type="number" class="normal-text form-control" placeholder="Number Box">
            </div>
        </div>
        <div class="col-sm-12">
            <div class="form-group">
                <h2>Input With "Numeric JS"</h2>
                <input type="text" class="numeric form-control" placeholder="Numeric Box">
            </div>
        </div>
    </div>
</div>

Code ส่วน javascript สำหรับเขียน function ควบคุมการ ซ่อน/แสดง Textbox ผ่านการเลือก Radio Button

<script>
$(document).ready(function(){
$('.numeric').numeric({ altDecimal: ".", negative: true, decimalPlaces: 2});
});
</script>

---

อธิบายเพิ่มเติม

ตัวอย่างด้านบน เราประกาศให้ input ทุกตัวที่มี class "numberic" เป็นช่อง Textbox ที่กรอกได้เฉพาะตัวเลข ส่วนค่า Config ใน {} มีรายละเอียดดังนี้
{
altDecimal: ".",  << กำหนดจุดทศนิยมเป็น "." (ในบางประเทศ ใช้ "," เป็นจุดทศนิยม)
negative: true,  << รับค่าตัวเลขติดลบหรือไม่ true รับ/falase ไม่รับ
decimalPlaces: 2 << กำหนดตำแหน่งทศนิยม 2 คือให้รับค่าทศนิยมได้ 2 หลัก
}