Question

我有一个文本框，其中包含数据库中的案例设置。如果数据库设置为大写，则文本框文本应转换为大写，如果设置为正确大小，则文本框文本应转换为正确大小写。我已经在javascript的帮助下实现了这一点。

但是，我还有一个设置是Upper Changeable，其中文本框文本转换为大写。但如果用户不想要大写，他可以改变案例。

 <script type="text/javascript">
   function toUpper(obj) {
       var mystring = obj.value;
       var sp = mystring.split(' ');
       var wl = 0;
       var f, f1, f2, r1, r2, r;
        if (document.getElementById('<%= hdnNameStyle.ClientID %>').value == "UC") {
         mystring = mystring.toUpperCase();
         obj.value = mystring;
     }
     if (document.getElementById('<%= hdnNameStyle.ClientID %>').value == "PC") {
         var word = new Array();
         for (i = 0; i < sp.length; i++) {
             f = sp[i].substring(0,1).toUpperCase();
             r = sp[i].substring(1);
             word[i] = f + r;
         }
         newstring = word.join(' ');
         obj.value = newstring;
     }
     if (document.getElementById('<%= hdnNameStyle.ClientID %>').value == "UG") {
         mystring = mystring.toUpperCase();
         obj.value = mystring;
     }
  }

这是我试过的javascript，它运行正常。但是，为了进一步说明如果hdnNameStyle值为UG，文本框文本将转换为大写，但如果用户不想要大写，则可以更改大小写。

如何让用户在javascript的帮助下更改案例？

谢谢，

Answer 1

不要改变文本本身，只需使用CSS类。

/* css */
.uppercase { text-decoration: uppercase }
.propercase { text-decoration: capitalize }


<!-- html -->
<p id="text">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<input type="checkbox" onclick="toggleUppercase()" />


// javascript
function toggleUppercase() {
    var text = document.getElementById("text");
    if (text.className === "uppercase") {
        text.className = "propercase";
    } else {
        text.className = "uppercase";
    }
}

有了这个，你应该能够得到一个有效的解决方案。

在文本框上强制执行大小写约束

1 个答案: