div可以输入内容不用input作为输入框屏蔽自动的input样式

沃梦达教程前端开发

2024-01-21 10

可以使用contenteditable属性使div元素可以输入内容，而且不会有input类型输入框的默认样式。下面是实现的步骤及示例说明：

可以使用contenteditable属性使div元素可以输入内容，而且不会有input类型输入框的默认样式。下面是实现的步骤及示例说明：

创建一个div元素，并添加contenteditable属性

<div contenteditable></div>

设置div的样式以样式化输入框

div {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  background-color: #f9f9f9;
}

在上面的代码中，设置了div元素的样式，使其看起来更像输入框，并用outline:none;消除了默认的轮廓。

使用textContent属性获取div输入框中的文本内容

const div = document.querySelector('div');
const content = div.textContent;
console.log(content);

在上面的代码中，使用querySelector()获取div元素，然后使用textContent属性获取div输入框中的文本内容，并在控制台中输出。

示例1：创建一个简单的div输入框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Div输入框示例</title>
  <style>
    div {
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
      padding: 10px;
      font-size: 16px;
      line-height: 1.5;
      outline: none;
      background-color: #f9f9f9;
    }
  </style>
</head>

<body>
  <div contenteditable></div>

  <script>
    const div = document.querySelector('div');
    const content = div.textContent;
    console.log(content);
  </script>
</body>

</html>

示例2：使用div替代textarea

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>替代textarea示例</title>
  <style>
    div {
      width: 100%;
      min-height: 100px;
      border: 1px solid #ccc;
      padding: 10px;
      font-size: 16px;
      line-height: 1.5;
      outline: none;
      background-color: #f9f9f9;
    }
  </style>
</head>

<body>
  <div contenteditable></div>

  <script>
    const div = document.querySelector('div');
    const content = div.textContent;
    console.log(content);
  </script>
</body>

</html>