Question

我正在尝试创建一个只会输入大写字母的textarea，即使用户没有按住shift或有大写锁定。理想情况下，无论如何都会接受输入，并自动将其转移到所有大写字母。我想到的大多数方式看起来都很笨拙，并且在转换之前也会显示小写字母。

任何建议或策略？

Answer 1

你可以使用CSS

textarea { text-transform: uppercase; }

但是，这只会在浏览器上呈现。假设你想将文本注入textarea中的脚本或数据库作为全部大写，那么你必须在注入或表单提交之前使用javascript的toUpperCase();。

这里是jsfiddle例如：

HTML：

<textarea>I really like jAvaScript</textarea>

的CSS：

textarea{
 text-transform: uppercase;
}

的javascript：

var myTextArea = document.getElementsByTagName('textarea');

for(var i=0; i<myTextArea.length; i++){
    console.log('Textarea ' + i + ' output: ' + myTextArea[i].innerHTML);  //I really like jAvaScript
    console.log('Textarea ' + i + ' converted output: ' + myTextArea[i].innerHTML.toUpperCase()); //I REALLY LIKE JAVASCRIPT
}

Answer 2

CSS：

textarea { text-transform: uppercase; }

Answer 3

廷，

在CSS中创建一个样式，如下所示：

textarea的{ 文本转换：大写; }

Answer 4

尝试添加

textarea{
   text-transform: uppercase;
}

到文本区域。

Answer 5

添加你可以得到它 CSS：

textarea { text-transform: uppercase; }

Answer 6

这可以通过oninput属性来实现，就像这样：

<textarea oninput="this.value = this.value.toUpperCase()">

<label for="upperCaseTextArea" style="display:block;">
  Upper Case Text Area
</label>
<textarea 
  id="upperCaseTextArea"
  name="upperCaseText"
  rows="5"
  cols="15"
  oninput="this.value=this.value.toUpperCase()"
 > 
</textarea>

制作textarea全部大写？

6 个答案: