CODEWITHSUNDEEP
javascript
methuselah
methuselah

Reputation: 13216

Change case to lowercase in JS text area

How do I change the case of a character in a textbox/textarea to lowercase onchange?

<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>

Upvotes: 2

Views: 7220

Answers (8)

Nyxynyx
Nyxynyx

Reputation: 63687

Try the [.toLowerCase()][1] method.

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

Upvotes: 0

Raynos
Raynos

Reputation: 169511

Because nobody fixed your code

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(); 
});

You want to add a change event handler. Inside the event handler you merely overwrite the value property of the element with the string changed to lowerCase.

I also fixed your in-line javascript in your HTML. It is the devil, avoid it.

Live Example

Upvotes: 1

stratwine
stratwine

Reputation: 3701

Simply change the value and assign it back.


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

Upvotes: 1

sdleihssirhc
sdleihssirhc

Reputation: 42496

Problem 1

I believe the onchange event only gets fired when the <textarea> no longer has focus. Instead, you'll want to use the onkeyup event.

Problem 2

You're only passing the string to the function. If you want to change the actual text in the <textarea>, you'll need to pass the actual DOM element to your function:

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

Problem 3

Once you pass the element into your function, you'll need to update its value attribute:

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

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49228

I would pass this and then work on it like a 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

Upvotes: 0

PleaseStand
PleaseStand

Reputation: 32112

Use onchange='this.value = this.value.toUpperCase();' to make the text uppercase. Replace toUpperCase with toLowerCase for the opposite.

If desired, you can use your own function instead of just toUpperCase, passing either just the textarea's value or the entire textarea. For example (value only): 

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

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

Or (entire textarea):

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

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

Upvotes: 0

Bryan
Bryan

Reputation: 2211

Have you tried;

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

    textarea.value = string;
}

With the modification to the onChange as;

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

Upvotes: 3

Fad
Fad

Reputation: 9858

Just use the .toLowerCase() method.

Upvotes: 1

Related Questions