Bootstrap tags input copy paste value not showing entire value-CodePudding

When the User pastes any value in the tag it's not showing the entire text it shows just the last few words, if typed it works fine.

<div >
  <div >
    <h1>Bootstrap Tags Input</h1>
  </div>

  <div >
    <label for="city_tag">Please write a tag</label>
    <input type="text" value="Istanbul, Adana, Adiyaman, Afyon, Agri, Aksaray, Ankara" data-role="tagsinput"  />
  </div>
</div>

Codepen

Any Suggestions will be helpful

When user pastes any content to add a tag want to show case entire value instead of the last few characters.

CodePudding user response：

The Bootstrap Tags Input creates an input text element inside the container with a size that gets changed while typing text but not when text gets pasted. That's why when you paste text longer than its current size, it will get "cropped" with the caret laying on the last position.

To show the whole text you'd need to change the input element size like the library already does while typing text. If you add a css rule like input{border: solid 1px;} you'll see what I'm talking about.

I made this demo bringing in your code from codepen and adding a js part that will add a paste event listener on document ready that will change the size of the text input also when text gets pasted.

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 >
    <div >
      <h1>Bootstrap Tags Input</h1>
    </div>

    <div >
      <label for="city_tag">Please write a tag</label>
      <input
        type="text"
        value="Istanbul, Adana, Adiyaman, Afyon, Agri, Aksaray, Ankara"
        data-role="tagsinput"
         />
    </div>
  </div>

</body>