텍스트 상자를 3 개 영역으로 분할

텍스트 상자를 세 영역으로 나눠야합니다. 예 : 값을 951-05-8765456과 같이 표시하고 싶습니다. 3 자리 이후에 기본적으로 "-"를 표시 할 수있는 방법이 있습니까? 그래서 사용자가 값을 입력하면 자동으로 나뉩니다. 내 텍스트 상자를 이미지와 동일하게 만듭니다.텍스트 상자를 3 개 영역으로 분할

출처

2013-12-17 BlackPOP

을 GUI 데브에서 이들은 마스크 입력으로 알려져있다. 여기에 jQuery 플러그인이 있습니다 - http://digitalbush.com/projects/masked-input-plugin/ – Prasanth

이 플러그인을 사용할 수 있습니다 http://igorescobar.github.io/jQuery-Mask-Plugin/ – Satpal

http://jsfiddle.net/juN9t/1/은 기본적으로 당신은 단지 CSS와 함께 할 수 없습니다.

Mask Plugin

당신은 다음과 같이 당신의 텍스트 상자에이 플러그인을 사용할 수 있습니다

$(".TEXT_BOX_CLASS").mask("9999/99999/99999");

출처

2013-12-17 11:34:47 Parixit

Prasanth는 이미이 링크를 덧글으로 게시했습니다 – Satpal

@Satpal 이미 플러그인을 사용하여 방금 답변으로 게시했습니다. CSS를 사용하는 다른 방법은 없으므로 답을 게시하는 데 영감을 받았습니다. – Parixit

3 텍스트를 사용해야합니다. maxlength 속성이 4/5/5와 같은 CSS를 사용하고 css를 사용하면 아래쪽 테두리를 제외한 텍스트 상자의 테두리를 제거 할 수 있습니다.

<input type="text" maxlength="4" class="Split" tabindex="1">/ 
<input type="text" maxlength="5" class="Split" tabindex="2">/ 
<input type="text" maxlength="5" class="Split" tabindex="3">

CSS :

.Split{ 
    border:none; 
    border-bottom: 1px solid black; 
    width:50px; 
}

데모 :이 jQuery 플러그인을 사용할 수 있습니다 당신은 쉽게 할 수 있도록

출처

2013-12-17 11:32:37

정답이 아닙니다. 친구 .... 대신 그는 아약스를 사용합니다 –

JQuery를 사용할 수 있습니다. 따라서 하나의 입력 필드는'.split()'과'.join()'메소드와 함께 사용될 수 있습니다. – AfromanJ

@Rony, 저는 HTML과 CSS를 사용하여 OP 결과를 보았습니다. –

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <style type="text/css"> 

    </style> 
</head> 
<body> 
<input type="text" class="mynum" value="" /> 

<script type="text/javascript"> 


    $('.mynum').keydown(function() { 
     var value = $('.mynum').val(); 
     var len = value.length;   
     if (len == 4) 
      value += '/'; 
     if (len == 10) 
      value += '/'; 
     if (len == 16) 
      return false; 
     $('.mynum').val(value); 
    }); 



</script> 

</body> 
</html>

출처

2013-12-17 11:43:48

텍스트 상자를 3 개 영역으로 분할

답변

관련 문제