使用javascript时，文本继续在输入框的右侧

Question

When entering text into the input box it continues outside the box and can not be seen, you can only see the text you have already written in the box. The text does not go outside the box if I comment out the javascript section so I know it is not a css issue but rather a javascript issue. I could live with it but I am sure other people would complain if they use it.

 var input = document.getElementById("text"); input.addEventListener("input", function(event) { var MessageString = document.querySelector('#text').value; // let look = convertToSmilies(MessageString); // var MessageString = look; input.value = ""; input.value += MessageString; });

 div#sendCtrls { width: auto; margin: 5px auto; } div#sendCtrls input, div#sendCtrls button{ width: 50%; margin: 5px auto; background: none repeat scroll 0 0 #F5F5F5; border: 1px solid #E0E0E0; padding: 0.625rem; } div#sendCtrls input:hover, div#sendCtrls button:hover{ width: 50%; margin: 5px auto; background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #FFCCCC; padding: 0.625rem; }

 <div id="sendCtrls"> <input type="text" placeholder="Your message here" id="text"> <button id="myBtn" style="width: auto;"> Send </button> </div>

I commented out 2 lines in the JS because it was not needed for testing, it is just a smiley replacer. It will check what is typed in to the input box and if a pattern is matched it will replace the pattern in the input box with a smiley. The issue with text going out of the box is there no matter if those two lines are commented out or not. If I comment out the whole of the JS section the text doesnt go out of the box but then the smiley replacer will not work.

Answer 1

Uncomment these 2 lines of code lines 304 and 305

var input = document.getElementById("text");
input.addEventListener("input", function(event) {
    
    var MessageString = document.querySelector('#text').value;

//      let look = convertToSmilies(MessageString); //here
//      var MessageString = look;                       //and here

    document.querySelector('#text').value = "";
    document.querySelector('#text').value += MessageString;
});

Answer 2

Finally I can lay this code to rest! The solution was rather simple and needed to replace the lines..

   input.value = "";
   input.value += MessageString;

with the line..

input.value = MessageString;

I really hope this solution helps someone who might also be having similar problems. The final JS code is as follows..

var input = document.getElementById("text");
input.addEventListener("input", function(event) {
    
    var MessageString = document.querySelector('#text').value;

    let look = convertToSmilies(MessageString);
    var MessageString = look;

    input.value = MessageString;
});