在 JS 文本区域中将大小写更改为小写答案

【问题标题】：Change case to lowercase in JS text area在 JS 文本区域中将大小写更改为小写
【发布时间】：2011-11-13 23:56:37
【问题描述】：

如何将文本框/文本区域中字符的大小写更改为小写？

<html>
<head>
<title>Page Title</title>
<script>
function f2(string)
{
string=string.toUpperCase();
alert(string);
}
</script>
</head>
<body>
<p>Here are my text entry objects:</p>
<form>
<p>
Change the scripting (still using one function) so that the text from the alert is shown in uppercase from the textbox but lowercase from the textarea:<br>
<textarea onchange='f2(this.value);'></textarea>
</p>
</form>
</body>

【问题讨论】：

演示：jsfiddle.net/HDR8t

标签： javascript

【解决方案1】：

你试过了吗；

function f2(textarea)
{
    string = textarea.value;
    alert(string);
    string = string.toLowerCase();

    textarea.value = string;
}

随着对onChange的修改为；

<textarea onchange='f2(this);'></textarea>

【讨论】：

【解决方案2】：

只需更改值并将其重新分配。


<textarea onchange='this.value=this.value.toLowerCase();'></textarea>

【讨论】：

【解决方案3】：

因为没有人修复你的代码

HTML：

<p>Here are my text entry objects:</p>
<form>
  <p>
    Change the scripting (still using one function) so that the text from the alert is shown in uppercase from the textbox but lowercase from the textarea:<br>
  <textarea></textarea>
</p>

JS：

document.getElementsByTagName("textarea")[0].addEventListener("change", function () {
    this.value = this.value.toLowerCase(); 
});

您想添加一个更改事件处理程序。在事件处理程序中，您只需覆盖元素的 value 属性，并将字符串更改为 lowerCase。

我还在您的 HTML 中修复了您的内嵌 javascript。这是魔鬼，避开它。

Live Example

【讨论】：

【解决方案4】：

只需使用.toLowerCase() 方法。

【讨论】：

【解决方案5】：

使用onchange='this.value = this.value.toUpperCase();' 将文本变为大写。将 toUpperCase 替换为 toLowerCase 即可。

如果需要，您可以使用自己的函数而不是只传递 toUpperCase，只传递 textarea 的值或整个 textarea。例如（仅值）：

<!-- HTML -->
<textarea onchange='this.value = f2(this.value);'></textarea>

// JavaScript
function f2(oldText) {
    var newText = oldText.toUpperCase();
    return newText;
}

或者（整个文本区域）：

<!-- HTML -->
<textarea onchange='f3(this);'></textarea>

// JavaScript
function f3(ta) {
    ta.value = ta.value.toUpperCase();
}

【讨论】：

【解决方案6】：

我会通过this，然后像DOMNode 一样处理它：

<p>Here are my text entry objects:</p>
<form>
 <p>
 Change the scripting (still using one function) so that the text from the alert is shown in uppercase from the textbox but lowercase from the textarea:<br>
  <textarea onchange='f2(this);'></textarea>
 </p>
</form>

function f2(el) {
    el.value = el.value.toLowerCase();
}

http://jsfiddle.net/HDR8t/1

【讨论】：

【解决方案7】：

问题 1

我相信 onchange 事件只有在 <textarea> 不再具有焦点时才会被触发。相反，您需要使用 onkeyup 事件。

问题 2

您只是将字符串传递给函数。如果您想更改 <textarea> 中的实际文本，您需要将实际的 DOM 元素传递给您的函数：

<textarea onkeyup="f3(this)"></textarea>

问题 3

将元素传递到函数后，您需要更新其value 属性：

function f3(elem) {
    elem.value = elem.value.toLowerCase();
}

【讨论】：

第一个只有当你想立即更改为小写时才有问题。
@JaredFarrish 我以为当他们说“onchange”时，他们的实际意思是“onimmediatechange”。

【解决方案8】：

试试[.toLowerCase()][1] 方法。

<textarea onchange='this.value=this.value.toLowerCase();'></textarea>

【讨论】：