【HTML】使用 div 自定义实现 input、textarea 输入框（适合定制化场景）

一颗不甘坠落的流星

已于 2023-07-06 14:52:14 修改

阅读量4.3k

点赞数 1

分类专栏：工作随记文章标签： html 前端 contenteditable

于 2023-07-05 12:27:49 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45677671/article/details/131549139

版权

工作随记专栏收录该内容

79 篇文章

订阅专栏

文章介绍了如何使用HTML的contenteditable属性创建自定义的Input和Textarea组件，包括处理placeholder和禁止回车换行功能。还展示了在React中实现一个多行文本输入框，能区分原有文案和生成后推理文案的颜色，并提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

API参考文档:

contenteditable : https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable
resize ：https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize

一、实现 Input 组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				padding: 5px;
				overflow: auto;
				border: 1px solid #d9d9d9;
				outline: 0;
			}

			/* 输入框为空时显示 placeholder */
			div:empty:before {
				content: attr(placeholder);
				color: #bfbfbf;
			}

			/* 输入框获取焦点时移除 placeholder */
			div:focus:before {
				content: none;
			}
		</style>
	</head>
	<body>
		<!-- contenteditable="true" 属性，使 div 元素变成用户可编辑  -->
		<div contenteditable="true" placeholder="请输入内容" onkeydown="myFunction()"></div>
	</body>
	<script type="text/javascript">
		// 禁止回车换行
		function myFunction() {
			if (window.event && window.event.keyCode == 13) {
				window.event.returnValue = false;
			}
		}
	</script>
</html>

在这里插入图片描述

不禁止回车换行就会变成这个样子：

在这里插入图片描述

二、实现 Textarea 组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				resize: both;
				padding: 5px;
				overflow: auto;
				border: 1px solid #d9d9d9;
				height: 100px;
				outline: 0;
			}

			/* 输入框为空时显示 placeholder */
			div:empty:before {
				content: attr(placeholder);
				color: #bfbfbf;
			}

			/* 输入框获取焦点时移除 placeholder */
			div:focus:before {
				content: none;
			}
		</style>
	</head>
	<body>
		<!-- contenteditable="true" 属性，使 div 元素变成用户可编辑  -->
		<div contenteditable="true" placeholder="请输入内容"></div>
	</body>
	<script type="text/javascript">
	</script>
</html>

在这里插入图片描述

三、React 实践案例

react 使多行文本输入框里面的原有文案，与生成后的推理文案，用颜色区分开来

效果图：

在这里插入图片描述

代码实现：


import { Button } from 'antd';
import {  useState } from 'react';

export default function ({ dataset }) {
  const [textArea, setTextArea] = useState('');
  const [textAreaDiv, setTextAreaDiv] = useState('');
  const [loading, setLoading] = useState(false);


  const fetchInfer = async () => {
    const title = document.getElementById('contentEditableSpanTitle')?.innerHTML ?? '';
    const data = document.getElementById('contentEditableSpanData')?.innerHTML ?? '';
    const params = { inputs: `${title}${data}` };
    console.log('params = ', title, '---', data);
    setLoading(true);
    try {
      const data = await api(params);
      setTextAreaDiv(data.replace(title, ''));
    } catch (error) {}
    setLoading(false);
  };

  return (
    <div>
      <div
        style={{
          resize: 'both',
          overflow: 'auto',
          padding: '5px',
          border: '1px solid #d9d9d9',
          minHeight: '100px',
        }}
      >
        <span id="contentEditableSpanTitle" contentEditable="true" style={{ border: 0, outline: 0 }}>
          {textArea}
          <span id="contentEditableSpanData" contentEditable="true" style={{ border: 0, outline: 0, color: '#2563eb' }}>
          	{textAreaDiv}
          </span>
        </span>
      </div>
      <Button onClick={fetchInfer} loading={loading} style={{ margin: '10px 0' }}>
        Compute
      </Button>
    </div>
  );
}