javascript - 如何在单击按钮时将页面中所有文本字段中的数据更改为大写

Question

我有一个包含大约 13 个文本字段的页面。我想通过单击按钮将所有文本字段中的数据大小写更改为大写。我可以使用 Jquery/javascript。我绝对不想使用 CSS-Text-transform 属性，因为它实际上并没有转换大小写，而只是虚拟地转换。

关于如何使用单个函数完成此任务的任何建议？

谢谢，耶斯万斯

Answer 1

您可以使用val方法：

$('#button').click(function(){
   $('input[type=text]').val(function(i, oldVal){
       return oldVal.toUpperCase()
   })
})

Answer 2

$('input[type=text], textarea').each(function(index, value){
  $(this).val($(this).val().toUpperCase();
});

Answer 3

如果你不想使用 jQuery，你可以使用这样的东西：

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    if (input.type === 'text') {
        input.value = input.value.toUpperCase();
    }
}

如果您不介意使用 jQuery，可以使用以下方法：

$('input[type=text]').each(function () {
    $(this).val($(this).val().toUpperCase());
});

Answer 4

一个纯 JavaScript 解决方案，如果您正在寻找一个

<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="button" value="Make BIG" onclick="makeBig()" />

<script type="text/javascript" language="javascript">
  function makeBig() {
      var inputs = document.getElementsByTagName("INPUT");
      for (i = 0; i < inputs.length; i++) {
           if (inputs[i].type.toLowerCase() == 'text')
               inputs[i].value = inputs[i].value.toUpperCase();
       }
   }
</script>