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>

Answers:

Answer

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

Simply change the value and assign it back.


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

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

Answer

Just use the .toLowerCase() method.

Answer

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

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

Answer

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.