Input 输入框前端与后端搭配自动大小写转换

前端

由 CSS 控制，只用于前端显示，并不改变实体数据。

关键代码 style="text-transform:uppercase;"

• none - 默认。定义带有小写字母和大写字母的标准的文本。
• capitalize - 文本中的每个单词以大写字母开头。
• uppercase - 定义仅有大写字母。
• lowercase - 定义无大写字母，仅有小写字母。
• inherit - 规定应该从父元素继承 text-transform 属性的值。

<input type="text" name="deviceSN" class="formControl" required="required" placeholder=" 例：A12345678" style="text-transform:uppercase;" value="<?php echo $deviceSN; ?>">

后端

由 PHP 控制，最终写入数据库并支持随时调取使用。

<?php $PostDeviceSN = strtoupper($_POST['deviceSN']); ?>

关键代码 strtoupper($_POST['deviceSN']);

• lcfirst() - 把字符串中的首字符转换为小写
• strtolower() - 把字符串转换为小写
• ucfirst() - 把字符串中的首字符转换为大写
• ucwords() - 把字符串中每个单词的首字符转换为大写

拓展

由按键控制，前端与后端同时生效，仅支持全大写或全小写，不支持字符串中的首字符转换。

<input name="text" type="text" onkeyup="this.value=this.value.toUpperCase()" />

关键代码 onkeyup="this.value=this.value.toUpperCase()"

• toUpperCase - 定义仅有大写字母。
• toLowerCase - 定义无大写字母，仅有小写字母。

参考

https://www.w3school.com.cn/cssref/pr_text_text-transform.asp

https://www.w3school.com.cn/php/func_string_strtoupper.asp

https://www.w3school.com.cn/jsref/jsref_toUpperCase.asp