Textarea与div中占位长度不一致问题

原创已于 2024-10-09 16:05:49 修改 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2024-02-22 15:29:11 首次发布

工作中的积累专栏收录该内容

27 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea 实时替换空格为 &amp;nbsp;</title>
<style>
    /* 统一设置字体样式和字体大小 */
  .consistent-nbsp {
    /* 默认宋体的文本域和div中的空格和nbsp占位长度不同 */
    /* 1.使用其他文字：font-family: Arial, sans-serif;实现 */ 
    /* 2.使用white-space: pre-wrap;设置强制他们的占位长度一致*/ 
    font-family:SimSun; /* 设置字体 */
    font-size: 16px; /* 设置字体大小 */
    white-space: pre-wrap;
  }
</style>
</head>
<body>

<textarea id="myTextarea" class="consistent-nbsp" rows="4" cols="50"></textarea>
<div id="output" class="consistent-nbsp"></div>

<script>
var textarea = document.getElementById('myTextarea');
var outputDiv = document.getElementById('output');

textarea.addEventListener('input', function() {
    var content = textarea.value;
    var contentWithNbsp = content.replace(/\n/g, '<br>').replace(/&nbsp;/g, ' ');;

    outputDiv.innerHTML = contentWithNbsp;
});
</script>

</body>
</html>