Question

我想将文本框拆分为三个区域，例如：我希望显示的值如951-05-8765456。有没有办法在3个地方之后默认显示“ - ”，所以当用户输入值时，它将自动分割。我希望我的文本框如图像 Splitted Text Box

Answer 1

基本上你不能只使用CSS，所以你可以使用这个jquery插件，你可以轻松完成。

您可以将此插件用于文本框，如下所示：

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

Answer 2

您需要使用带有maxss属性的3个文本框，其中css类似于4/5/5，并且使用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/

Answer 3

<!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>

将文本框拆分为3个区域

3 个答案: