如何在使用JavaScript鍵入字母后放置空格？

Question

我想在打字時把一個空格放在空格后面。

我們可以使用css letter-spacing屬性，但是當我們復制這個文本時，我不會保留空格。

我們如何用香草javascript制作它？

為我的CSS增加了字母間距，以顯示我想要的東西。

的jsfiddle

 var my_text = document.getElementById("my_text"); var output_text = document.getElementById("output_text"); my_text.addEventListener("keyup", function() { var val = this.value; output_text.innerHTML = val; }); 

 #output_text { width: 300px; height: 200px; border: 1px solid #ccc; letter-spacing: 10px; } 

 <textarea id="my_text" cols="30" rows="10"></textarea> <div id="output_text"></div> 

Answer 1

拆分所有字符並使用空格連接： https ： //jsfiddle.net/wkw72u7e/4/ 。

var my_text = document.getElementById("my_text");
var output_text = document.getElementById("output_text");

my_text.addEventListener("keyup", function() {
  output_text.innerHTML = this.value.split('').join(' ');
});


#output_text {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

Answer 2

為什么香草javascript？ 普通的javascript可以做到：

 var my_text = document.getElementById("my_text"); var output_text = document.getElementById("output_text"); my_text.addEventListener("keypress", function(event) { event.preventDefault(); output_text.innerHTML += " " + String.fromCharCode(event.keyCode); }); 

 #output_text { width: 300px; height: 200px; border: 1px solid #ccc; } 

 <textarea id="my_text" cols="30" rows="10"></textarea> <div id="output_text"></div>