Hướng dẫn split input box html - hộp nhập phân chia html

Sử dụng phương thức chia tách chuỗi JavaScript (^] Ví dụ: example:
example:

Nội dung chính

  • Làm thế nào để bạn chia một hộp văn bản?
  • Những gì đang chia văn bản trong HTML?
  • Làm cách nào để phân tách văn bản trong một dòng trong HTML?
  • Làm thế nào để bạn chia các hộp văn bản trong PowerPoint?

<!DOCTYPE html>
<html>
<body>

<input type="text" id="textbox1" value="10000223--DOMPARIDINE">
<input type="text" id="textbox2" value="">
<input type="text" id="textbox3" value="">

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var text1 = document.getElementById("textbox1").value;
    var result = text1.split("--");
    document.getElementById("textbox2").value = result[0];
    document.getElementById("textbox3").value = result[1];
}
</script>
</body>
</html>

Tôi muốn chia hộp văn bản của mình thành ba khu vực, ví dụ: Tôi muốn các giá trị được hiển thị như 951-05-8765456. Có cách nào để hiển thị "-" Theo mặc định sau 3 vị trí không và vì vậy khi người dùng nhập giá trị, nó sẽ được chia tự động. Tôi muốn hộp văn bản của tôi như trong hình ảnh

Hướng dẫn split input box html - hộp nhập phân chia html

Hỏi ngày 17 tháng 12 năm 2013 lúc 11:29Dec 17, 2013 at 11:29Dec 17, 2013 at 11:29

BlackpopblackpopBlackPOPBlackPOP

5.5812 Huy hiệu vàng32 Huy hiệu bạc48 Huy hiệu đồng2 gold badges32 silver badges48 bronze badges2 gold badges32 silver badges48 bronze badges

2

Về cơ bản, bạn không thể làm chỉ với CSS, vì vậy bạn có thể sử dụng plugin jQuery này và bạn làm điều đó một cách dễ dàng.

Plugin mặt nạ

Bạn có thể sử dụng plugin này cho hộp văn bản của mình như sau:

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

Đã trả lời ngày 17 tháng 12 năm 2013 lúc 11:34Dec 17, 2013 at 11:34Dec 17, 2013 at 11:34

ParixitparixitParixitParixit

3.7893 huy hiệu vàng38 Huy hiệu bạc60 Huy hiệu đồng3 gold badges38 silver badges60 bronze badges3 gold badges38 silver badges60 bronze badges

1

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

Đã trả lời ngày 17 tháng 12 năm 2013 lúc 11:43Dec 17, 2013 at 11:43Dec 17, 2013 at 11:43

Bạn cần sử dụng 3 hộp văn bản với thuộc tính MAXLEPT với CSS như 4/5/5 và sử dụng CSS, bạn có thể xóa đường viền của hộp văn bản ngoại trừ đường viền dưới cùng.

 <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;
}

Bản demo: http://jsfiddle.net/jun9t/1/

Đã trả lời ngày 17 tháng 12 năm 2013 lúc 11:32Dec 17, 2013 at 11:32Dec 17, 2013 at 11:32

Krish rkrish rKrish RKrish R

22.3K7 Huy hiệu vàng49 Huy hiệu bạc57 Huy hiệu đồng7 gold badges49 silver badges57 bronze badges7 gold badges49 silver badges57 bronze badges

3

Làm thế nào để bạn chia một hộp văn bản?

Nhấp chuột phải vào hộp văn bản, trình giữ chỗ hoặc đường viền hình dạng và nhấp vào hình dạng định dạng. Ở phía bên phải của cửa sổ, nhấp vào Tùy chọn văn bản> TextBox. Nhấp vào các cột, nhập số cột vào hộp số và khoảng cách giữa mỗi cột (tính bằng inch) trong hộp khoảng cách.

Những gì đang chia văn bản trong HTML?

Làm cách nào để phân tách văn bản trong một dòng trong HTML? breaks the Text node into two nodes at the specified offset index, keeping both nodes in the tree as siblings. After Splitting the text, the main node contains all the content up to the specified offset index point, and a newly created node of the same type contains the remaining text.

Làm thế nào để bạn chia các hộp văn bản trong PowerPoint?

Tôi muốn chia hộp văn bản của mình thành ba khu vực, ví dụ: Tôi muốn các giá trị được hiển thị như 951-05-8765456. Có cách nào để hiển thị "-" Theo mặc định sau 3 vị trí không và vì vậy khi người dùng nhập giá trị, nó sẽ được chia tự động. Tôi muốn hộp văn bản của tôi như trong hình ảnhuse the
tag
. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag. Below is an HTML file with a

Hỏi ngày 17 tháng 12 năm 2013 lúc 11:29Dec 17, 2013 at 11:29
element.

Làm thế nào để bạn chia các hộp văn bản trong PowerPoint?

Tôi muốn chia hộp văn bản của mình thành ba khu vực, ví dụ: Tôi muốn các giá trị được hiển thị như 951-05-8765456. Có cách nào để hiển thị "-" Theo mặc định sau 3 vị trí không và vì vậy khi người dùng nhập giá trị, nó sẽ được chia tự động. Tôi muốn hộp văn bản của tôi như trong hình ảnh.

Hỏi ngày 17 tháng 12 năm 2013 lúc 11:29Dec 17, 2013 at 11:29

BlackpopblackpopBlackPOP