ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingรบกวนแก้ไขสคริปให้หน่อยค่ะเกี่ยวกับ number format
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: รบกวนแก้ไขสคริปให้หน่อยค่ะเกี่ยวกับ number format  (อ่าน 1663 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
ChilTunDer
ก๊วนเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 317



ดูรายละเอียด
« เมื่อ: 03 มีนาคม 2021, 19:10:08 »

เราทำช่องรับ Mobile Number กับ ID Card เป็น Format ที่มี "-" ขั้นระหว่างตัวเลข ทีนี้ปัญหาคือพอถึง "-" แรกแล้ว Cursor มันเพี้ยน มันไม่ยอมข้าม "-" ค่ะ ไม่รู้ว่าต้องแก้ไขอย่างไงแล้ว โค้ดด้านล่าง พร้อมลิงค์ตัวอย่างค่ะ

โค๊ด:
https://jsfiddle.net/j67zavby/2/


็HTML
โค๊ด:
<input type="text" data-mask="___-___-____" />
<input type="text" data-mask="_-____-_____-__-_" />

JAVASCRIPT
โค๊ด:
Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask);

function applyDataMask(field) {
var mask = field.dataset.mask.split('');
 
  function stripMask(maskedData) {
  function isDigit(char) {
    return /\d/.test(char);
    }
    return maskedData.split('').filter(isDigit);
  }
 
  function applyMask(data) {
  return mask.map(function (char) {
    if (char != '_') return char;
      if (data.length == 0) return char;
      return data.shift();
    }).join('')
  }
 
  function reapplyMask(data) {
  return applyMask(stripMask(data));
  }
 
  function changed() {
  var oldStart = field.selectionStart;
    var oldEnd = field.selectionEnd;
    field.value = reapplyMask(field.value);
    field.selectionStart = oldStart;
    field.selectionEnd = oldEnd;
  }
 
  field.addEventListener('click', changed)
  field.addEventListener('keyup', changed)
}
บันทึกการเข้า
chaiyana
คนรักเสียว
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 156



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 05 มีนาคม 2021, 11:52:15 »

ตามมาดันครับ
บันทึกการเข้า

jomynn
Verified Seller
สมุนแก๊งเสียว
*

พลังน้ำใจ: 75
ออฟไลน์ ออฟไลน์

กระทู้: 762



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 05 มีนาคม 2021, 20:04:02 »

ลองดูตามนี้ครับ

=====================================================================================================================================================================
โค๊ด:
    <div class="form-group">
            <label for="credit-card">ID Card</label>
            <input type="text" class="form-control" id="credit-card" name="id-card" data-inputmask="'mask': '9-9999-99999-99-9'" style="width: 20ch;">
          </div>
=====================================================================================================================================================================

html
โค๊ด:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="jumbotron my-4">
        <h1>Input mask for Bootstrap 4 Advanced Components</h1>
        <p class="lead">by djibe.</p>
        <p>
          Dependencies : jQuery and <a href="https://github.com/RobinHerbots/Inputmask" target="_blank">Input mask plugin</a> (5.0.0-beta 87)<br> An equivalent plugin is <a href="https://github.com/jaridmargolin/formatter.js" target="_blank">Formatter</a>.
        </p>
        <p>
          Works with input type="text", "search", "tel", "password", &lt;textarea&gt;, &lt;div contenteditable="true"&gt;<br> Try the demos below
        </p>
        <h2>
          Demo
        </h2>
        <form role="form" id="my-form">
          <div class="form-group">
            <label for="date">Date (French)</label>
            <input type="text" class="form-control" id="date" name="date" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-inputmask-placeholder="jj/mm/aaaa">
          </div>
          <div class="form-group">
            <label for="time">Time (12h)</label>
            <input type="text" class="form-control" id="time" name="time" data-inputmask-alias="datetime" data-inputmask-inputformat="hh:MM" data-inputmask-placeholder="hh:mm">
          </div>
          <div class="form-group">
            <label for="time24">Time (24h)</label>
            <input type="text" class="form-control" id="time24" name="time24" data-inputmask-alias="datetime" data-inputmask-inputformat="HH:MM" data-inputmask-placeholder="hh:mm">
          </div>
          <div class="form-group">
            <label for="datetime">Date and Time</label>
            <input type="text" class="form-control" id="datetime" name="datetime" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy HH:MM" data-inputmask-placeholder="jj/mm/aaaa hh:mm">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" id="email" name="email" data-inputmask="'alias': 'email'">
          </div>
          <div class="form-group">
            <label for="credit-card">Credit card number</label>
            <input type="text" class="form-control" id="credit-card" name="credit-card" data-inputmask="'mask': '9999 9999 9999 9999'" style="width: 20ch;">
          </div>
           <div class="form-group">
            <label for="credit-card">ID Card</label>
            <input type="text" class="form-control" id="credit-card" name="id-card" data-inputmask="'mask': '9-9999-99999-99-9'" style="width: 20ch;">
          </div>
          <div class="form-group">
            <label for="currency">Currency</label>
            <input type="text" class="form-control text-left" id="currency" name="currency" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '€ ', 'placeholder': '0'">
          </div>
          <div class="form-group">
            <label for="license-plate">French license plate</label>
            <input type="text" class="form-control" id="license-plate" name="license-plate" data-inputmask="'mask': 'AA-999-AA'" style="width: 9ch;">
          </div>
          <div class="form-group">
            <label for="phone">Phone number (French)</label>
            <input type="text" class="form-control" id="phone" name="phone" data-inputmask="'mask': '+33 9 99 99 99 99'" style="width: 17ch;">
          </div>
          <div class="form-group">
            <label for="ip">IP address</label>
            <input type="text" class="form-control" id="ip" name="ip" data-inputmask="'alias': 'ip'" style="width: 15ch;" autocomplete="off">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

javascript
โค๊ด:
// Initialize InputMask
$('input').inputmask();

https://jsfiddle.net/418wxLe0/
บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์