如何实现HTML中textarea输入内容的首字母大写效果？

原有方案失效原因 #

::first-letter 伪元素仅能作用于块级元素的直接文本子节点，你将该规则绑定在textarea的父级p标签上，无法选中textarea内部的输入内容；且textarea本身属于替换元素，当前所有主流浏览器均不支持textarea直接使用::first-letter伪元素，因此原生CSS方案无法直接实现该需求。

可落地的实现方案 #

你可以根据你的业务场景选择以下两种方案：

方案1：原生textarea+JS实时处理（推荐）

无需修改原有HTML结构，仅需新增JS监听输入事件，实时将首字母转为大写：

const targetTextarea = document.querySelector('.textarea_part textarea')
targetTextarea.addEventListener('input', function() {
  const inputVal = this.value
  // 空输入直接返回，避免异常
  if (!inputVal.length) return
  // 仅首字母大写，剩余内容保持原有输入格式
  this.value = inputVal.charAt(0).toUpperCase() + inputVal.slice(1)
})

如果需要同时把placeholder的首字母也显示为大写，补充以下CSS即可：

textarea::placeholder {
  text-transform: capitalize;
}

方案2：使用contenteditable元素模拟textarea（纯CSS实现）

如果不想写JS，可以用可编辑div模拟textarea的交互效果，就能直接用::first-letter规则：

<!-- 替换原有p+textarea结构 -->
<div 
  class="textarea_part" 
  contenteditable="true" 
  placeholder="La tua richiesta"
></div>

配套CSS：

.textarea_part {
  /* 模拟原生textarea的默认样式 */
  width: 300px;
  min-height: 80px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  overflow: auto;
  outline: none;
  font-family: inherit;
  font-size: inherit;
}
/* 首字母大写规则 */
.textarea_part::first-letter {
  text-transform: capitalize;
}
/* 模拟placeholder效果 */
.textarea_part:empty::before {
  content: attr(placeholder);
  color: #999;
  pointer-events: none;
}

注意：该方案的输入内容不会自动随表单提交，你需要在表单提交时手动获取该div的innerText属性，添加到提交参数中。

内容的提问来源于stack exchange，提问作者Simone Argento