將文本框分割爲3個區域

我想將我的文本框分割爲三個區域，例如：我希望顯示的值類似951-05-8765456。有沒有辦法在3個地方默認顯示「 - 」，所以當用戶輸入數值時會自動分割。我希望我的文本框如圖所示 Splitted Text Box 將文本框分割爲3個區域

來源

2013-12-17 BlackPOP

在GUI開發工具，這些被稱爲蒙面的投入。這裏有一個jQuery插件 - http://digitalbush.com/projects/masked-input-plugin/ – Prasanth

你可以使用這個插件http://igorescobar.github.io/jQuery-Mask-Plugin/ – Satpal

基本上你不能只用CSS做的，所以你可以使用這個jQuery插件，你很容易做到這一點。

Mask Plugin

你可以使用這個插件爲您的文本框如下：

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

來源

2013-12-17 11:34:47 Parixit

Prasanth已經發布此鏈接作爲評論 – Satpal

@Satpal我已經使用過這個插件，所以我只是發佈了一個答案。沒有別的方法只使用CSS，所以我鼓勵發佈答案。 – Parixit

您需要使用3個文本帶有像4/5/5這樣的css的maxlength屬性的框，並且使用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; 
}

演示：http://jsfiddle.net/juN9t/1/

來源

2013-12-17 11:32:37

這是不正確的答案好友....而不是他會利用ajax –

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個區域

回答

相關問題