WordPress点击按钮通过HTML/CSS实现文本大小写转换失效求助

• 纯HTML+CSS无法实现点击按钮修改文本域实际内容的交互：CSS没有事件响应能力，也不能修改表单元素存储的真实值，text-transform属性仅能改变文字的视觉渲染效果，既不会修改文本域内的实际内容，也无法通过点击按钮触发状态切换。
• 原有CSS选择器编写错误：你写的.wp-block-column.uppercase选择器目标是同时携带wp-block-column和uppercase类的列容器，但uppercase/lowercase类实际是加在按钮元素上的，就算样式生效也只会修改按钮自身的文字样式，完全无法影响到文本域。

要实现点击按钮真实转换文本大小写的效果，仅需添加十余行原生JavaScript代码，无需引入任何外部依赖，直接粘贴到WordPress自定义HTML模块即可正常运行。

替换后的完整HTML代码 #

<div id="form">
<textarea id="textInput" placeholder="Type or paste text here"></textarea>
<div class="wp-block-columns">
<div class="wp-block-column"><button type="button" class="uppercase" id="toUpperBtn">UPPER CASE</button></div>
<div class="wp-block-column"><button type="button" class="lowercase" id="toLowerBtn">lower case</button></div>
</div>
</div>

<script>
const textArea = document.getElementById('textInput');
document.getElementById('toUpperBtn').addEventListener('click', () => {
  textArea.value = textArea.value.toUpperCase();
});
document.getElementById('toLowerBtn').addEventListener('click', () => {
  textArea.value = textArea.value.toLowerCase();
});
</script>

修正后的CSS代码（替换原有自定义CSS即可） #

#form textarea {
height: 25vh;
min-height: 7.25em;
max-height: 67vh;
resize: vertical;
width: 100%;
padding: 0.8rem;
box-sizing: border-box;
}
#form .wp-block-columns {
margin: 0;
gap: 0.8rem;
}
#form .wp-block-column {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#form button {
width: 100%;
padding: 0.7rem 1rem;
cursor: pointer;
border: none;
border-radius: 4px;
background: #007cba;
color: #fff;
}
#form button:hover {
background: #006ba1;
}

• 如果你不需要修改文本的真实值，仅需要固定视觉上的大小写显示，可以不用加JS，直接给#form textarea加上text-transform: uppercase;或text-transform: lowercase;即可，但这种方式下用户复制文本、提交表单时拿到的还是原始输入的内容，不会被转换。
• 上述代码中的按钮配色、间距、圆角等样式参数可以根据你站点的设计风格自行调整。

内容的提问来源于stack exchange，提问作者Ale Ikram