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>
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>
Simply change the value and assign it back.
<textarea onchange='this.value=this.value.toLowerCase();'></textarea>
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
Just use the .toLowerCase() method.
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();
}
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
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();
}
Try the [.toLowerCase()][1] method.
<textarea onchange='this.value=this.value.toLowerCase();'></textarea>
Related
I'm trying to learn more JavaScript by working on projects I'm interested in so pardon me if this is a very basic question.
I'm trying to build a tool that detects a string of words (preferably a text or JSON file) from the HTML page (in a div).
<html>
<title>Hello world</title>
<head>
</head>
<body>
<div class="print" id="print"></div>
<textarea class="textarea" class="answerBox" id="answerBox"></textarea>
<script>
var inputBox = document.getElementById('answerBox');
inputBox.onkeyup = function(){
document.getElementById('print').innerHTML = inputBox.value;
}
</script>
</body>
</html>
Here's what I've done so far: https://jsfiddle.net/mc3kqj4t/ It's basically still nothing but what I want to do is to type in something in the box, then as soon as I type the text instantly appears on the page but also while that happens I can see if any of the words that I typed contain certain keywords that match a RegEx (for example "fox" and it's permutations "f ox" or something like that). I need to reference an external file because the words need to be updated every now and then.
Can anyone help?
Thoughts:
You can store the input text in a variable and regex in another. (not sure in your case whether both are necessary)
Use JavaScript replace to replace regex matches, with your highlighted HTML.
Please refer to this demo based on your code.
<html>
<title>Vulgarism Sandbox</title>
<head>
</head>
<body>
<p>Try input in the textarea with some text containing `a\w+`</p>
<div class="print" id="print"></div>
<textarea class="textarea" class="answerBox" id="answerBox" value="abcde"></textarea>
<input value="a\w+" id="regexInput" />
<script>
var inputBox = document.getElementById('answerBox');
inputBox.onkeyup = function() {
const regexInput = new RegExp(document.getElementById('regexInput').value, 'ig');
const text = document.getElementById('answerBox').value;
// replace regex matches in input text, and add 'highlight' HTML
const renderText = text.replace(regexInput, match => `<b>${match}</b>`)
document.getElementById('print').innerHTML = renderText;
}
</script>
</body>
</html>
I have been trying to practice some exercises using Javascript. Here are some challenges I have been facing. Please suggest if there is a mistake or something that I am missing.
Note: I do not want to use Jquery at this stage.
Exercise:
Ask the user to input some text. On the click of a button, the entered text needs to be displayed as rotating.
The first approach I took gets me the result the first time. But if I enter a new text, and click the button, the rotation fluctuates between the old text and new. I am not sure if I am explaining it right. Here's the first attempt:
Test the result: http://learningharvest.co.in/
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Enter the text to be reversed</p>
<div id="texttoberotated">
<input type="text" id="texttobeRot"></p>
</div>
<div>
<button id="rotateText">Rotate Text</button>
<p id="rotatedText"></p>
</div>
<script>
document.getElementById("rotateText").onclick=function (){
var text=null;
text= document.getElementById("texttobeRot").value;
var finaltext=text;
document.getElementById("rotatedText").innerHTML=finaltext;
setInterval(rotatetext, 500);
var numberofRotations=0;
var length=0;
length=text.length;
var i=0;
function rotatetext(){
i=length;
if(numberofRotations<=text.length){
getText();
}else{
numberofRotations=0;
length=text.length;
i=length;
preText=null;
postText=null;
finaltext=null;
getText();
}
}
function getText(){
preText=text.slice(length);
postText=text.slice(0,i);
i--;
finaltext=preText+" "+postText;
numberofRotations++;
length--;
document.getElementById("rotatedText").innerHTML=finaltext;
}
}
</script>
</body>
2. The second attempt I am making is using the childNodes method. However, I am unable to get the nodeValue of the input tag. The nodeValue is working if I try with any other element, but not with the input element.
Also, the function rotatetext is being executed on page load and not when the button is clicked. Works well if I add the onclick event inline in the button tag itself.
Here's the error i get in console:
Rotate text parent child method.html:27 Uncaught TypeError: Cannot read property 'nodeValue' of undefined
at rotatetext (Rotate text parent child method.html:27)
at Rotate text parent child method.html:23
Here's the body content I have drafted so far. At this stage, I am just trying to replace the text "Show Rotated Text here" with the text entered by the user.
<body>
<p>Enter the text to be reversed</p>
<input type="text" id="texttobeRot">
<button id="rotateText">Rotate Text</button>
<p id="rotatedText">Show Rotated Text here</p>
<script>
document.getElementById("rotateText").onclick= rotatetext();
function rotatetext(){
var element=document.getElementById("texttobeRot");
var textNode=element.childNodes[0];
var text=textNode.nodeValue;
var texttobeRotated;
texttobeRotated= text;
document.getElementById("rotatedText").innerHTML=texttobeRotated;
};
Look forward to all of your inputs.
Using the first approach if you add
document.getElementById("texttoberotated").onkeyup = function() {
text = '';
}
to the bottom of your script it will clear the text value when you begin to type and you can enter a new word without the issue of them being jumbled together as you described.
I put a working example of your code at https://codepen.io/chaosmaths/pen/LrwrpQ
I have got a variable in javascript called 'signature'
var signature;
//(Data is here)
document.write(signature)
In HTML, I have the following:
<div id="siggen">
<textarea id="content" cols="80" rows="10"></textarea>
What i want is when i click generate button the variable signature appers in text area. Can anyone help?
I think you need like:
var signature = "Hello";
function addVal(){
document.getElementById('content').value = signature
}
<div id="siggen">
<textarea id="content" cols="80" rows="10"></textarea>
<button id="btnClick" onclick="addVal()">Click</button>
You can use JQuery :
$("#content").val(signature)
See val-vs-text-for-textarea
Your question is not quite clear but I assume you want to do something like this.
First in your html add a textarea and a button with these properties. Use disabled only if you want to make the text area disabled.
<textarea disabled id="displaytext"></textarea>
<button onclick="buttonFunction()">Click !</button>
Now in your javascript file, write the buttonFunction() to display the value in signature variable in the text area.
var signature = "This is the content to display";
function buttonFunction() {
document.getElementById("displaytext").innerHTML = signature;
}
This is the result. The text will be displayed when you click the button.
This question already has answers here:
Append text to textarea with javascript
(3 answers)
Closed 8 years ago.
How can we pass a string from js file to HTML? Assume I have declared a string in privacy.js and I need to get in to my html text area.
I have imputed the script file:
<script type="text/javascript" src="js/privacy.js"></script>
I am assinging string value in to a div
document.getElementById("privacy_text").innerHTML = privacy_string;
I need the Sting value in text area
<textarea class="terms" readonly="readonly">
<div id="privacy_text"></div>
</textarea>
Don't embed a div in a textarea and rather assign it it's own id:
<textarea id="privacy_textarea"></textarea>
And then try to assign a value to it:
document.getElementById("privacy_textarea").value = privacy_string;
Here is a working example.
You could as well use innerHTML but textarea is a form element so I'd recommend to use value.
Give your textarea an ID like, this
<textarea class="terms" readonly="readonly" id="theTextarea">
</textarea>
and then use the following JavaScript to select it and change the value:
document.getElementById("theTextarea").value = "theValue";
If you have access to jQuery, you can use:
$("#theTextarea").val("theValue");
Fiddle
Either way, a div can't go inside a textarea.
If you can assign an ID to your textarea...
<textarea id="myTextArea"></textarea>
Then this should work:
document.getElementById("myTextArea").value = privacy_string;
Give that textarea an ID , then set value to text area like document.getElementById('your text area id').value=privacy_text; from javascript file.
eg:
<script>
var privacy_text="your string";
document.getElementById(textId).value=privacy_text;
</script>
<textarea id="textId"></textarea>
Try this:
document.querySelector(".terms").value = 'someValue';
You can find HTML elements from javascript using document.querySelector by using different type of "query filters" in the above example it is finding the text area by CSS class using .cssClass.
Regarding the div inside your textarea object please note that is not possible. You can only non-HTML text.
<html>
<head>
<script type="text/javascript">
function printValue()
{
var name="Anand";
document.getElementById("textbox1").innerHTML=name;
}
</script>
</head>
<body>
<input type="text" id="textbox1"/>
<input type="button" value="GetText" onclick="PrintValue()"/>
</body>
</html>
Instead of .innerHtml, use this:
document.getElementById("privacy_text").value= "Hello";
Take the following page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"/>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".hashtag").click(function() {
var txt = $.trim($(this).text());
$("#text-box").append(txt);
});
});
</script>
</body>
</html>
The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class hashtag their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea text-box.
This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in text-box manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears.
I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that.
Thanks.
2 things.
First, <textarea/> is not a valid tag. <textarea> tags must be fully closed with a full </textarea> closing tag.
Second, $(textarea).append(txt) doesn't work like you think. When a page is loaded the text nodes inside the textarea are set the value of that form field. After that, the text nodes and the value can be disconnected. As you type in the field, the value changes, but the text nodes inside it on the DOM do not. Then you change the text nodes with the append() and the browser erases the value because it knows the text nodes inside the tag have changed.
So you want to set the value, you don't want to append. Use jQuery's val() method for this.
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
var box = $("#text-box");
box.val(box.val() + txt);
});
});
Working example:
http://jsfiddle.net/Hhptn/
Use the val() function :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"></textarea>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
$("#text-box").val($("#text-box").val() + txt);
});
});
</script>
</body>
</html>
Does that help?
The reason append does not seem to work is because the value of the textarea is made up of the child node, but by treating it as multiple seperate nodes the screen won't update, according to my Firebug. Firebug will show me the updated child nodes, but NOT the text I typed manually into the textarea, whereas the screen shows me the manually typed text but not the new nodes.
You can reference by value of textarea.
$(document).ready(function () {
window.document.getElementById("ELEMENT_ID").value = "VALUE";
});
function GetValueAfterChange()
{
var data = document.getElementById("ELEMENT_ID").value;
}
works fine.
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();