ต้องการกำหนดรุปแบบของช่องกรอกให้เป็นเเพทเทิร์นของเบอร์โทร เเต่ไม่ต้องการให้กรอกตัวหนังสือ

พูดคุย แลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework Jquery

Moderator: mindphp

User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 26733
Joined: 31/03/2014 10:02 am
Contact:

ต้องการกำหนดรุปแบบของช่องกรอกให้เป็นเเพทเทิร์นของเบอร์โทร เเต่ไม่ต้องการให้กรอกตัวหนังสือ

Post by thatsawan »

Code: Select all

        <label><input name="reg_phone"  tabindex="10" placeholder="***-***-xxxx" type="text" class="inputbox autowidth"  onkeyup="autoPhone(this)"  value="{REG_PHONE}"></label>                                     

Code: Select all

function autoPhone(obj) {
   
    var pattern = new String("___-___-____"); 
    var pattern_ex = new String("-"); 
    var returnText = new String("");
    var obj_l = obj.value.length;
    var obj_l2 = obj_l - 1;
    for (i = 0; i < pattern.length; i++) {
        if (obj_l2 == i && pattern.charAt(i + 1) == pattern_ex) {
            returnText += obj.value + pattern_ex;
            obj.value = returnText;
        }
    }
    if (obj_l >= pattern.length) {
        obj.value = obj.value.substr(0, pattern.length);
    }
}
ตอนนี้ลองเปลี่ยนจาก new String เป็น new integer new Number เเล้วก็มันจะไม่ทำงาน
User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 26733
Joined: 31/03/2014 10:02 am
Contact:

Re: ต้องการกำหนดรุปแบบของช่องกรอกให้เป็นเเพทเทิร์นของเบอร์โทร เเต่ไม่ต้องการให้กรอกตัวหนังสือ

Post by thatsawan »

ใช้เป็น type="tel" ก็ได้ เเต่

Code: Select all

<form action="/action_page.php">
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="080-000-0000" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required><br><br>
  <small>Format: 080-000-0000</small><br><br>
  <input type="submit">
</form>
User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 26733
Joined: 31/03/2014 10:02 am
Contact:

Re: ต้องการกำหนดรุปแบบของช่องกรอกให้เป็นเเพทเทิร์นของเบอร์โทร เเต่ไม่ต้องการให้กรอกตัวหนังสือ

Post by thatsawan »

ลองเอามาใช้ใน phpbb ใช้ไม่ได้

Code: Select all

              <input type="tel" id="phone" name="phone" placeholder="123-456-7891" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
JavaScript & Jquery Ajax-1.png
JavaScript & Jquery Ajax-1.png (6.13 KiB) Viewed 1288 times
User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 25556
Joined: 22/09/2008 6:18 pm
Contact:

Re: ต้องการกำหนดรุปแบบของช่องกรอกให้เป็นเเพทเทิร์นของเบอร์โทร เเต่ไม่ต้องการให้กรอกตัวหนังสือ

Post by mindphp »

ลองดู

Code: Select all

<input type="text" name="input_mask" data-mask="(000) 000-0000" class="ff-el-form-control" placeholder="0XX-***-XXXX" data-name="input_mask" id="ff_13_input_mask" autocomplete="off" maxlength="14">
https://igorescobar.github.io/jQuery-Ma ... /docs.html
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 25556
Joined: 22/09/2008 6:18 pm
Contact:

Re: ต้องการกำหนดรุปแบบของช่องกรอกให้เป็นเเพทเทิร์นของเบอร์โทร เเต่ไม่ต้องการให้กรอกตัวหนังสือ

Post by mindphp »

นำเจ้า Plugin เข้ามาแล้วระบบจะจัดตาม รูปแบบที่เรากำหนดให้เอง
ตัวอย่างรูปแบบ

Code: Select all

$(document).ready(function(){
  $('.date').mask('00/00/0000');
  $('.time').mask('00:00:00');
  $('.date_time').mask('00/00/0000 00:00:00');
  $('.cep').mask('00000-000');
  $('.phone').mask('0000-0000');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.cnpj').mask('00.000.000/0000-00', {reverse: true});
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
  $('.money2').mask("#.##0,00", {reverse: true});
  $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
    translation: {
      'Z': {
        pattern: /[0-9]/, optional: true
      }
    }
  });
  $('.ip_address').mask('099.099.099.099');
  $('.percent').mask('##0,00%', {reverse: true});
  $('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});
  $('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});
  $('.fallback').mask("00r00r0000", {
      translation: {
        'r': {
          pattern: /[\/]/,
          fallback: '/'
        },
        placeholder: "__/__/____"
      }
    });
  $('.selectonfocus').mask("00/00/0000", {selectOnFocus: true});
});
จากคู่มือ
https://igorescobar.github.io/jQuery-Ma ... /docs.html
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
Post Reply

Return to “JavaScript & Jquery Ajax”

Who is online

Users browsing this forum: No registered users and 7 guests