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 want to suggest a variable which contain data by user from input section and store it into my variable so how I can do this in JavaScript? I suggest a = .... but that does not work as expected
let a = document.getElementById("link");
function lol() {
document.getElementById("print").innerHTML = `a`;
}
<input type="text" id="link" name="link">
<button id="btn" onclick="lol()">Upload Video</button>
<p id="print"></p>
You have to pass event and it's target value not only make reference from input to paragraph.
Adrian
function lol() {
document.getElementById("print").innerText = a.value;
}
Use innerText instead of innerHtml to avoid html syntax passed through that input.
If you put variable name in parentheses it will treat it as text and not variable.
And a is input field with many options, to access value you use a.value
I'm trying to accomplish a live character counter for a text input field, but cannot seem to make it work. The onkeypress-function either go as undefined or is just called once when loading the page
Simply assigning the function with onkeypress=" " does not seem to work.
Additionally, I want to update the text of charcountLabel; which I cannot seem to do. Simply using 'document.getElementById' for updating its innerHTML does not work.
How do I correctly assign keypress-functions to html-elements in .ejs?
How do I access and update innerHTML of other elements?
See code below:
<input type="text" id="textContent" onkeypress="charcount">
// Should be live-updated with the length of input text above.
<span id="charcountLabel"> 0 </span>
<script>
function charcount() {
var characterCount = document.getElementById("textContent").innerText.length;
document.getElementById("charcountLabel").innerHTML = characterCount;
}
</script>
Here you are
<input type="text" id="textContent" onkeypress="charcount()">
<!-- Should be live-updated with the length of input text above. -->
<span id="charcountLabel">0</span>
<script>
function charcount() {
var characterCount = document.getElementById("textContent").value.length;
document.getElementById("charcountLabel").innerHTML = characterCount;
}
</script>
Use parenthesis () to call the function and replace innerText with value property.
Note that // is comment in Javascript, not in html where you should use <!-- your comment --> instead.
Last, it has nothing to do with ejs.
What I want to do is allow the user to input a string then display that string in the web page inside a div element, but I don't want the user to be able to add a bold tag or anything that would actually make the HTML text bold. How could I make it so the text entered by the user does not get converted into HTML code, if the text has an HTML tag in it?
Use createTextNode(value) and append it to your element(Standard solution) or innerText(Non standard solution) instead of innerHTML.
For a JQuery solution look at Dan Weber's answer.
here's a neat little function to sanitize untrusted text:
function sanitize(ht){ // tested in ff, ch, ie9+
return new Option(ht).innerHTML;
}
example input/output:
sanitize(" Hello <img src=data:image/png, onmouseover=alert(666) onerror=alert(666)> World");
// == " Hello <img src=data:image/png, onmouseover=alert(666) onerror=alert(666)> World"
It will achieve the same results as setting elm.textContent=str;, but as a function, you can use it easier inline, like to run markdown after you sanitize() so that you can pretty-format input (eg. linking URLs) without running arbitrary HTML from the user.
use .text() when setting the text in the div rather than .HTML. This will render it as text instead of html.
$(document).ready(function() {
// Handler for .ready() called.
$("#change-it").click(function() {
var userLink = $('#usr-input').val().replace(/.*?:\/\//g, "");
$('#users-text').text(userLink);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr-input">
<br>
<button id="change-it" type="button">Update Text</button>
<br>
<div id="users-text"></div>
Why not simply use .text() ?
$('#in').on('keyup', function(e) {
$('#out').text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="in">
<br>
<div id="out"></div>
This question already has answers here:
contenteditable change events
(21 answers)
Closed 7 years ago.
Basically I have a element as is demonstrated here:
<!DOCTYPE html>
<html>
<body>
<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>
</body>
</html>
The user can paste data into that field and therefore change the contents between the tags. The reason to do this is to get the metadata (like hyperlinks, etc.) that would be lost with a simple <textarea> element.
How can you copy this data into an <input type=hidden> element, if the content is changed by the user?
This question is unlike this question where there is no output of the data (a static text is shown, which does not indicate how to access the real data that the User has entered) and the input is of a different type (<div> vs. <p>)
HTML:
<p id="input" contenteditable="true" onKeyup="myFunction()">This is a paragraph. It is editable. Try to change this text.</p>
<input type="text" id="output">
Javascript:
function myFunction() {
document.getElementById("output").value = document.getElementById("input").innerHTML;
}
JSfiddle: http://jsfiddle.net/qw2oveuo/1/
You can combine the input event with the innerHTML to grab the data:
document.querySelector("p").addEventListener("input", function(e) {
document.querySelector("input[type=hidden]").value = e.target.innerHTML;
});
Working Example
This will update the hidden input any time the user changes the content of the p either by keypress or copy/paste.
You can use the jQuery .html() method to get the content of the p tag
<p id="my-contenteditable-p" contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>
<input type="hidden" id="hidden-in"/>
like
var content = $('#my-contenteditable-p').html();
and after checking if the content is changed by the user, You can use jQuery .val() method to set the value to hidden field.
$("#hidden-in").val(content);
Just add a listener that gets your text and put it somewhere else:
var get = document.getElementById('getcontenthere');
var put = document.getElementById('putcontenthere');
var updateInput = function() {
put.value = get.innerText;
}
get.oninput = updateInput;
updateInput();
<!DOCTYPE html>
<html>
<body>
<p id="getcontenthere" contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>
<p>This is type=text so you can see it, but it could be hidden as well</p>
<input id="putcontenthere" type="text">
</body>
</html>
I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at the other properties and attributes and couldn't figure out what I was doing wrong.
The activeElement selector works fine, it is selecting the correct element.
Edit: I just found that it's the value property. So I'd like to change what I'm asking. Why doesn't changing innerHTML work on input elements? Why do they have that property if I can't do anything with it?
Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
value applies only to objects that have the value attribute (normally, form controls).
innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls).
They are not equivalent or replaceable. Depends on what you are trying to achieve
First understand where to use what.
<input type="text" value="23" id="age">
Here now
var ageElem=document.getElementById('age');
So on this ageElem you can have that many things what that element contains.So you can use its value,type etc attributes. But cannot use innerHTML because we don't write anything between input tag
<button id='ageButton'>Display Age</button>
So here Display Age is the innerHTML content as it is written inside HTML tag button.
Using innerHTML on an input tag would just result in:
<input name="button" value="Click" ... > InnerHTML Goes Here </input>
But because an input tag doesn't need a closing tag it'll get reset to:
<input name="button" value="Click" ... />
So it's likely your browsers is applying the changes and immediatly resetting it.
do you mean something like this:
$('.activeElement').val('Some text');
<input id="input" type="number">
document.getElementById("input").addEventListener("change", GetData);
function GetData () {
var data = document.getElementById("input").value;
console.log(data);
function ModifyData () {
document.getElementById("input").value = data + "69";
};
ModifyData();
};
My comments: Here input field works as an input and as a display by changing .value
Each HTML element has an innerHTML property that defines both the HTML
code and the text that occurs between that element's opening and
closing tag. By changing an element's innerHTML after some user
interaction, you can make much more interactive pages.
JScript
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
HTML
<p>Welcome to Stack OverFlow <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
In the above example b tag is the innerhtml and dude is its value so to change those values we have written a function in JScript
innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
For instance:
document.getElementById("example").innerHTML = "my string";
This example uses the method to "find" an HTML element (with id="example") and changes the element content (innerHTML) to "my string":
HTML
Change
Javascript
function change(){
document.getElementById(“example”).innerHTML = “Hello, World!”
}
After you clicked the button, Hello, World! will appear because the innerHTML insert the value (in this case, Hello, World!) into between the opening tag and closing tag with an id “example”.
So, if you inspect the element after clicking the button, you will see the following code :
<div id=”example”>Hello, World!</div>
That’s all
innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
Example.
HTML
Change
Javascript
function FunctionName(){
document.getElementById(“example”).innerHTML = “Hello, Kennedy!”
}
On button Click, Hello, Kennedy! will appear because the innerHTML insert the value (in this case, Hello, Kennedy!) into between the opening tag and closing tag with an id “example”.
So, on inspecting the element after clicking the button, you will notice the following code :
<div id=”example”>Hello, Kennedy!</div>
Use
document.querySelector('input').defaultValue = "sometext"
Using innerHTML does not work on input elements and also textContent
var lat = document.getElementById("lat").value;
lat.value = position.coords.latitude;
<input type="text" id="long" class="form-control" placeholder="Longitude">
<button onclick="getLocation()" class="btn btn-default">Get Data</button>
Instaed of using InnerHTML use Value for input types