숫자를 입력하는 동안 숫자 입력 필드에 대시를 추가하는 방법은 무엇입니까?

자바 스크립트를 사용하여 입력 할 때마다 4th 자릿수의 html 숫자 필드에 대시를 삽입하려고합니다. 키를 누르는 대신 on-key-press, on-key-up 등을 사용했습니다.하지만 시도했을 때 기능을 on-key-press/on-key-up 이벤트로 변경하면 예상 된 결과가 제공되지 않습니다.숫자를 입력하는 동안 숫자 입력 필드에 대시를 추가하는 방법은 무엇입니까?

이것은 내가 사용한 코드입니다.

<html> 
<head> 
<script> 
function addDashes(f) 
{ 
    f.value = f.value.slice(0,4)+"-"+f.value.slice(4,8)+"-"+f.value.slice(8,12); 
} 
</script> 
</head> 
    <body> 
    Phone: <input type='text' name='phone' onblur='addDashes(this)' maxlength='12'><BR> 
    </body> 
</html>

저는 'JavaScript'의 초보자입니다. 내가 어디에서 잘못하고 있니?

출처

2017-02-11 Kailash PK

'예상 결과'는 무엇입니까? – lewisjb

123456789012를 입력하면 결과는 1234-5678-9012가됩니다. –

텍스트 상자의 ID를 지정하고 흐림 기능이 필요하지 않으면 document.ready 함수에 이것을 씁니다. 귀하의 HTML 라인 :

<input type='text' id="txtPhoneNo" name='phone' maxlength='12'><BR>

귀하의 jQuery를 행 :

$(document).ready(function() { 
    $("#txtPhoneNo").keyup(function() { 
        if ($(this).val().length == 4) { 
         $(this).val($(this).val() + "-"); 
        } 
        else if ($(this).val().length == 9) { 
         $(this).val($(this).val() + "-"); 
        } 
        else if ($(this).val().length == 14) { 
         $(this).val($(this).val() + "-"); 
        } 
       }); 
});

은 당신에게 도움이되기를 바랍니다.

출처

2017-02-11 06:28:17

사용자가 초기 부품을 수정하기로 결정한 경우 (예 : 모든 부품을 입력하고 두 번째 번호가 누락 된 경우) 작동하지 않습니다. 그들은 jQuery에 관해서도 아무 말도하지 않았기 때문에 바닐라 솔루션을 선호한다고 생각합니다. – lewisjb

작동 중입니다.하지만 중간에 숫자를 지우려고하면 지저분 해지고 있습니다. 그것에 대해 할 수 있습니까? –

그리고 필드의 최대 길이 속성이 또 다른 의미에서 취해지고 있습니다. 하이픈은 채레 크로 터로 계산됩니다. 하이픈은 최대 길이에서 제외해야합니다. –

이렇게하면됩니다. 그것은 또한 '삭제'를 지원합니다.

그러나, 나는 당신이 사용하는 마스킹의 조각을 원하는 경우 masking

$(document).ready(function() { 
 
    $("#txtPhoneNo").keyup(function (e) { 
 
     if($(this).val().length === 14) return; 
 
     if(e.keyCode === 8 || e.keyCode === 37 || e.keyCode === 39) return; 
 
     let newStr = ''; 
 
     let groups = $(this).val().split('-'); 
 
     for(let i in groups) { 
 
     if (groups[i].length % 4 === 0) { 
 
     newStr += groups[i] + "-" 
 
     } else { 
 
     newStr += groups[i]; 
 
     } 
 
     } 
 
     $(this).val(newStr); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id="txtPhoneNo" name='phone' maxlength='14'><BR>

를 사용을 제안, 내가 기꺼이 도와 드리겠습니다 알려주세요.

출처

2017-02-11 07:04:03

버그 수정으로 업데이트되었습니다 –

마스킹이 더 좋은 옵션입니다 –

필드에서 중간 요소를 삭제하면 패턴을 방해하고 있다고 생각합니다. 대신 4-4-3 중 하나를 삭제하면 4-3-4가됩니다. 나는 window.onload 함수 안에서 당신의 첫번째 해결책을 선호한다. 그것은 나에게 잘 돌아갔다. –

숫자를 입력하는 동안 숫자 입력 필드에 대시를 추가하는 방법은 무엇입니까?

답변

관련 문제