필드 수정시 캐럿 위치에 문제가 있습니다. (HTML + JS)

Question

원본 개발자가 다음 JavaScript를 프로그래밍했는데 의견이 다소 안 좋았지 만 Javscript에서는별로 작동하지 않아 내가 가진 시간과 함께 더 나은 해결책.

해결해야 할 문제는 입력을 텍스트 필드 (<input type="text" class="phone_val"...)로 보내는 키를 누를 때마다 코드가 끝나기 때문에 캐럿이 끝까지 이동한다는 것입니다.

코드 목적은 데이터베이스에서 사용할 번호의 형식을 지정하는 것입니다. 허용되는 패턴은 다음과 같습니다.

  235 - 5555 
    (321) 234 - 5555 
    1 (321) 234 - 5555 
21 (321) 234 - 5555 
012 (321) 234 - 5555 

이들은 고객 기반에서 사용하는 전화 번호 유형입니다. 키를 누를 때마다 끝으로 이동하는 캐럿 (텍스트 커서 위치)없이 이러한 패턴을 적용 할 수 있어야합니다. 그 사람이 들판의 한가운데있는 일부 문자를 수정해야 할 때까지는 문제가되지 않습니다. 나는 정규 표현식을 사용하여 코드를 심각하게 단순화하고 축소 할 수 있다고 생각한다.

는 HTML :

<input type="text" class="phone_val" style="width: 85%; text-align: right;" 
     value="<%= CustomerFields("billing_phone") %>" id="billing_phone" 
     name="billing_phone" tabindex="10" /> 

자바 스크립트 (jQuery를 가정) :

$(document).ready(function() { 
    $('.phone_val').attr('maxlength', 20); 
    $('.phone_val').keyup(function(){ 
     var startVal, finVal, i; 
     startVal = $(this).val().replace(/\D/g,''); 
     if (startVal.length <= 7) { 
      finVal = ""; 
      for (i = 0; i < startVal.length; i += 1) { 
       if (i === 3) { 
        finVal += " - " + startVal.charAt(i); 
       } 
       else { 
        finVal += startVal.charAt(i); 
       } 
      } 
     } 
     else if (startVal.length > 7 && startVal.length < 11) { 
      finVal = "("; 
      for (i = 0; i < startVal.length; i += 1) { 
       if (i === 3) { 
        finVal += ") " + startVal.charAt(i); 
       } 
       else if (i === 6) { 
        finVal += " - " + startVal.charAt(i); 
       } 
       else { 
        finVal += startVal.charAt(i); 
       } 
      } 
     } 
     else if (startVal.length >= 11) { 
      finVal = ""; 
      stopP = startVal.length < 13 ? startVal.length - 11 : 2; 
      for (i = 0; i < startVal.length; i += 1) { 
       if (i === stopP) { 
        finVal += startVal.charAt(i) + " ("; 
       } 
       else if (i === (stopP + 4)) { 
        finVal += ") " + startVal.charAt(i); 
       } 
       else if (i === (stopP + 7)) { 
        finVal += " - " + startVal.charAt(i); 
       } 
       else { 
        finVal += startVal.charAt(i); 
       } 
      } 
     } 

     if (startVal.length < 4) { 
      finVal = finVal.replace(/\D/g,''); 
     } 
     $(this).val(finVal); 
    }); 
}); 

Answer 1

이 많은 수준에 끔찍한입니다. 사용자의 경우 여기에 두 가지 나쁜 점이 있습니다. 먼저 입력 할 때 입력을 변경하면 혼란스럽고 짜증납니다. 둘째, 문자를 입력 할 때마다 끝까지 캐럿을 옮기는 것만으로 화를 낼 수 있습니다. 캐럿을 이동하는 코드를 작성하는 것이 가능하지만 그 대신 추천 할 것이고 change 또는 blur 이벤트의 유효성 검사를 제안하거나 사용자의 의견에서 제안하는대로 키보드가 작동하지 않을 때까지 기다리는 것이 좋습니다.

Answer 2

는 여기에 지금까지있어 무엇 : 7 자리와 10 ~ 13 개의 숫자 처리합니다,하지만 난 사이에있는 사람과 할 모르겠어요

$('.phone_val').blur(function() { 
    var inpVal = $(this).val().replace(/\D/g, ''); //get rid of everything but numbers 

    // RegEx for: 
    // xxx (xxx) xxx - xxxx 
    //  xx (xxx) xxx - xxxx 
    //  x (xxx) xxx - xxxx 
    //  (xxx) xxx - xxxx 
    inpVal = inpVal.replace(/^(\d{0,3})(\d{3})(\d{3})(\d{4})$/, '$1($2) $3 - $4'); 

    // RegEx for (needs a separate one because of the parentheses): 
    //    xxx - xxxx 
    inpVal = inpVal.replace(/^(\d{3})(\d{4})$/, '$1 - $2'); 

    $(this).val(inpVal); 
}); 

. 사용자가 실수를 쉽게 볼 수 있도록 형식을 지정해야합니까? 아니면 그들을 내버려 두어야합니까?