當用戶在標簽中粘貼任何值時，它不會顯示整個文本，它只顯示最后幾個單詞，如果鍵入它可以正常作業。
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h1>Bootstrap Tags Input</h1>
</div>
<div class="form-group">
<label for="city_tag">Please write a tag</label>
<input type="text" value="Istanbul, Adana, Adiyaman, Afyon, Agri, Aksaray, Ankara" data-role="tagsinput" class="form-control" />
</div>
</div>
代碼筆
任何建議都會有所幫助
當用戶粘貼任何內容以添加標簽時，希望顯示整個值而不是最后幾個字符。
uj5u.com熱心網友回復：
Bootstrap Tags Input 在容器內創建一個輸入文本元素，其大小在鍵入文本時會發生變化，但在粘貼文本時不會發生變化。這就是為什么當您粘貼的文本長于其當前大小時，它會被“裁剪”，插入符號位于最后一個位置。
要顯示整個文本，您需要像庫在鍵入文本時所做的那樣更改輸入元素的大小。如果你添加一個 css 規則，input{border: solid 1px;}你就會明白我在說什么。
我制作了這個演示，從 codepen 中引入了您的代碼并添加了一個 js 部分，該部分將在準備好的檔案上添加一個粘貼事件偵聽器，該偵聽器也會在粘貼文本時更改文本輸入的大小。
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.bootstrap-tagsinput input').
addEventListener('paste', (event) => {
let paste = (event.clipboardData || window.clipboardData).getData('text');
const size = event.target.value.length paste.length;
event.target.setAttribute('size', size);
});
});body {
background: #fafafa;
padding: 10px;
}
h1 {
margin-top: 0;
}
/*
input{
border: solid 1px !important;
}
*/<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<body>
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h1>Bootstrap Tags Input</h1>
</div>
<div class="form-group">
<label for="city_tag">Please write a tag</label>
<input
type="text"
value="Istanbul, Adana, Adiyaman, Afyon, Agri, Aksaray, Ankara"
data-role="tagsinput"
class="form-control" />
</div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/537880.html