Tôi sẽ sử dụng TagSInput của BootStrap mà không cần thêm tính năng thẻ mới (chỉ xóa thẻ). Làm thế nào để vô hiệu hóa thêm các thẻ mới? Tôi đang sử dụng TagSInput v0.8.0 mới nhất với Twitter Bootstrap 3. Đây là đoạn trích của tôi: <input id="removeonlyinput" type="text" value="Amsterdam,Berlin,Lisbon" data-role="tagsinput" />
<script>
$('#removeonlyinput').tagsinput({
freeinput: false
});
</script>
Cœur 35K24 Huy hiệu vàng188 Huy hiệu bạc257 Huy hiệu đồng24 gold badges188 silver badges257 bronze badges
Đã hỏi ngày 22 tháng 2 năm 2017 lúc 15:24Feb 22, 2017 at 15:24 Làm thế nào về việc làm cho trường đầu vào sẵn sàng? Bằng cách này, không người dùng có thể nhập văn bản đầu vào. $('input[type=text]').prop("readonly", true);
Đã trả lời ngày 25 tháng 5 năm 2017 lúc 12:59May 25, 2017 at 12:59 ChandanchandanChandan 2191 Huy hiệu vàng3 Huy hiệu bạc17 Huy hiệu đồng1 gold badge3 silver badges17 bronze badges
Cố gắng sử dụng sự kiện $('input[type=text]').prop("readonly", true);
9:$('#removeonlyinput').on('beforeItemAdd', function(event) {
event.cancel = true;
});
Đã trả lời ngày 8 tháng 4 năm 2017 lúc 14:46Apr 8, 2017 at 14:46
DenysmdenysmDenysM 3791 Huy hiệu vàng2 Huy hiệu bạc13 Huy hiệu đồng1 gold badge2 silver badges13 bronze badges 1 Bạn có thể sửa đổi tệp $('#removeonlyinput').on('beforeItemAdd', function(event) {
event.cancel = true;
});
0.Tìm dòng $('#removeonlyinput').on('beforeItemAdd', function(event) {
event.cancel = true;
});
1 và làm cho nó $('#removeonlyinput').on('beforeItemAdd', function(event) {
event.cancel = true;
});
2Sau đó, nó sẽ không thêm thẻ mới. Theo cách này, tôi đã đạt được chức năng. Hi vọng điêu nay co ich! Đã trả lời ngày 22 tháng 2 năm 2017 lúc 15:31Feb 22, 2017 at 15:31
Neophyteneophyteneophyte 6.4742 Huy hiệu vàng27 Huy hiệu bạc43 Huy hiệu đồng2 gold badges27 silver badges43 bronze badges 1 bạn có thể làm được việc này $( "#removeonlyinput" ).prop( "disabled", true );
Đừng bận tâm những không gian bổ sung. Đã trả lời ngày 17 tháng 10 năm 2019 lúc 6:07Oct 17, 2019 at 6:07 1 nó không thể freeinput: false
it's freeInput: false
Đã trả lời ngày 3 tháng 3 lúc 12:24Mar 3 at 12:24
Đã đăng vào thg 6 23, 2018 9:12 SA 2 phút đọc 2 phút đọc
- Bootstrap Tags Input là bộ thư việc jQuery kết hợp với thư viện Bootstrap hỗ trợ người dùng tạo giao diện quản lý tag.
- Các bạn có thể download source code bộ thư viện tại đây và tham khảo cách cài đặt và sử dụng các hàm của thư viện tại đây.
2. Cài đặt:<!DOCTYPE html>
<html>
<head>
<title>Edit With Bootstrap TagsInput</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<center>
<div class="form-group">
<input type="text" value="123,456,789" data-role="tagsinput" placeholder="Add tags" />
</div>
</center>
</body>
</html>
3. Một vài hàm cơ bản:
- Lấy giá trị của các tag .
$('input').val(); // trả về "123,456,789"
$('input').tagsinput('items'); trả về ["123", "456", "789"]
$('input').tagsinput('add', '123');
$('input[type=text]').prop("readonly", true);
0$('input[type=text]').prop("readonly", true);
14. Một vài sự kiện đơn giản:$('input[type=text]').prop("readonly", true);
2$('input[type=text]').prop("readonly", true);
3$('input[type=text]').prop("readonly", true);
4$('input[type=text]').prop("readonly", true);
5- Thư viện Bootstrap Tags Input chỉ cho phép ta thêm hoặc xóa 1 tag, để edit 1 tag đã có sẵn ta phải xóa tag đó và thêm 1 tag mới với nội dung tương ứng.
- Hôm nay mình sẽ hướng dẫn các bạn edit trực tiếp 1 tag bằng javascript.
- Giả sử ta có file html
$('#removeonlyinput').on('beforeItemAdd', function(event) {
event.cancel = true;
});
8 đã include thư việc Bootstrap, thư việc Bootstrap Tags Input và file $('#removeonlyinput').on('beforeItemAdd', function(event) {
event.cancel = true;
});
9.js
$('input[type=text]').prop("readonly", true);
6- Ta cài dặt sự kiện
$( "#removeonlyinput" ).prop( "disabled", true );
0 cho $( "#removeonlyinput" ).prop( "disabled", true );
1, khi click vào $( "#removeonlyinput" ).prop( "disabled", true );
1, ta ẩn tag đó, ẩn thẻ $( "#removeonlyinput" ).prop( "disabled", true );
3 măc định, thay thế bằng 1 thẻ $( "#removeonlyinput" ).prop( "disabled", true );
3 có giá trị của $( "#removeonlyinput" ).prop( "disabled", true );
1 và fpcus vào thẻ $( "#removeonlyinput" ).prop( "disabled", true );
3 đó.
$('input[type=text]').prop("readonly", true);
7- Kết quả thu được.
- 3. Một vài hàm cơ bản:
$('input[type=text]').prop("readonly", true);
8- Bạn cũng có thể cài đặt tương tự khi user nhấn enter hoặc tab.
- Tham khảo source code ví dụ tại đây.
All rights reserved | 
