将文本输入的第一个字符大写

Posted 2023-02-25

【中文标题】将文本输入的第一个字符大写

【英文标题】：Capitalise the first character of text input

【发布时间】：2017-11-03 05:53:11

【问题描述】：

我看不出我哪里出了问题。我的代码是...

function firstC()
    
        var x = document.getElementsByClassName("uValue");

        for(var i = 0; i < x.length; i++) 
            x.value.charAt(0).toUpperCase();
        
    

它被...调用

<td><input type="text" name="firstname" value="(required)" id="firstName" class="uValue" onclick="empty(this.id)" onblur="firstC()" /></td>

empty() 函数通过删除输入框的值（如果其值为“（必需）”）正常工作，但我无法让firstC() 函数将任何输入的第一个字符大写。

编辑：我正在使用getElementsByClassName，因为我试图允许多个输入框使用相同的功能。

【参考方案1】：

您应该将 this 传递给您的内联 JS 事件：

onclick="empty(this)" onblur="firstC(this)"

例子

function empty(el)   // el now refers to the this referrer
  el.value="";


function firstC(el) 
  var val = el.value;
  el.value = val.charAt(0).toUpperCase() + val.substr(1);

<input type="text" onclick="empty(this)" onblur="firstC(this)"  value="(required)" id="firstName" class="uValue" name="firstname">

P.S：不要忘记，除了使用 empty() 和 value="(required)"，您可以简单地使用 placeholder 属性

placeholder="(required)"

【讨论】：

感谢您的回答。很高兴看到做事的替代方法，我也测试了这个方法，所以我知道它有效:)。也感谢您对占位符的提醒！

【参考方案2】：

您忘记将值分配回去

function firstC()
    
        var x = document.getElementsByClassName("uValue");

        for(var i = 0; i < x.length; i++) 
            x[i].value = x[i].value.charAt(0).toUpperCase() + x[i].value.substr(1);
        
    

【讨论】：

对不起，您也错过了索引 :-)（已修复）

啊该死的！我需要更频繁地来这里，早在我花几个小时绞尽脑汁之前。这有效 - 非常感谢！ :D