TextBox 輸入自動轉大寫：JavaScript 與 CSS 兩種方案比較

方案一：JavaScript onkeyup 即時轉換

<asp:TextBox ID="TextBoxSeriesNumber" runat="server" />

<script type="text/javascript">
window.onload = function () {
    var tb = document.getElementById("<%= TextBoxSeriesNumber.ClientID %>");
    tb.onkeyup = function () { this.value = this.value.toUpperCase(); };
};
</script>

缺點：使用者會看到字元先以小寫顯示、隨即跳變大寫，視覺閃爍。

方案二：CSS text-transform (推薦)

<asp:TextBox ID="TextBoxSeriesNumber" runat="server" 
    style="text-transform:uppercase;" />

優點：零 JS、無閃爍、瀏覽器原生渲染大寫、複製貼上時也自動轉換。

text-transform 完整屬性值

注意事項

• CSS 僅改變**顯示**，表單提交時伺服器收到的仍是原始輸入 (小寫)。若後端需大寫，仍需 `ToUpper()` 處理。
• 若需**輸入即轉換且提交也為大寫**，結合兩者：CSS 顯示 + `onblur` 或伺服器端統一轉換。

完整最佳實務

<asp:TextBox ID="txtCode" runat="server" 
    CssClass="uppercase-input" 
    onblur="this.value=this.value.toUpperCase();" />

<style>
.uppercase-input { text-transform: uppercase; }
</style>

前端顯示大寫、失焦時寫入真值大寫，兼顧體驗與資料正確性。