用DIV实现input、textarea 输入框（解决火狐回车换行问题）

2023-09-16 03:12:55

用DIV实现input、textarea输入框

前言

在做文本编辑器时，系统自带的 textarea 在火狐浏览器中回车不会进行换行，被显示成了空格，找了好几种方案没解决，试了下 div 实现 input、textarea 的方式。

实现步骤

创建一个div元素，并为其设置样式，使其看起来像一个输入框。
在div元素内创建一个contenteditable属性，使其可以编辑。
使用javascript代码来监听div元素的键盘事件，并在回车时触发换行。
使用javascript代码来监听div元素的输入事件，并在输入内容时更新div元素的innerHTML属性。

示例代码

<!DOCTYPE html>
<html>
<head>

<style>
.input-div {
  width: 300px;
  height: 20px;
  border: 1px solid #ccc;
  padding: 5px;
}
</style>
</head>
<body>
<div class="input-div" contenteditable="true"></div>

<script>
// 监听div元素的键盘事件
var inputDiv = document.querySelector('.input-div');
inputDiv.addEventListener('keydown', function(e) {
  // 如果是回车键，则触发换行
  if (e.keyCode === 13) {
    e.preventDefault();
    inputDiv.innerHTML += '<br>';
  }
});

// 监听div元素的输入事件
inputDiv.addEventListener('input', function() {
  // 更新div元素的innerHTML属性
  inputDiv.innerHTML = inputDiv.innerHTML;
});
</script>
</body>
</html>