ต่อไป »

[ChilTunDer]

เราทำช่องรับ 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]

ตามมาดันครับ

[jomynn]

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

=====================================================================================================================================================================

โค๊ด:

    <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/