This works pretty good (when user pastes, inserts anything):
Code Snippet:
<!DOCTYPE HTML>
<html>
<body>
<input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." name="subject" pattern=".+?(?:[s'].+?){2,}" autofocus required title="" />
<button id="toggleduplicates">Toggle allowing duplicates</button>
<script>
// I added this to allow duplicates
let allowDuplicates = false;
var element = document.getElementById("btn-input"),
togglebtn = document.getElementById("toggleduplicates");
function handler(e){
if(!allowDuplicates){
var userInput = element.value,
allWords = userInput.split(" "),
searchedWords = [];
// Search thru all words (Indicating words by splitting the input in spaces, as done in the "allWords" variable)
for(i = 0; i < allWords.length; i++){
// If the current word (allWords[i]) already is in the searchedWords array
if(searchedWords.includes(allWords[i]))
element.value = element.value.replace(allWords[i] + " ", "");
// Adds the word to the list of used words
searchedWords.push(allWords[i]);
}}}
// Execute the function "handler" when the input field is updated
element.addEventListener("input", handler);
function toggleHandler(){
// Setting the allow duplicates boolean to the value that is not currently (true -> false / false -> true)
allowDuplicates = !allowDuplicates;
// Updates the input, in case it would include duplicates
handler();
alert("You may now " + (!allowDuplicates ? "NOT ":"") + "use duplicate words.");
}
// Execute the function "toggleHandler" when the button is clicked
togglebtn.addEventListener("click", toggleHandler);
</script>
</body>
</html>