I am trying to write a JS function that takes a block of text pasted inside textarea, removes line breaks but keeps paragraph breaks, and updates the text inside that textarea before I submit a form.
I have attempted to do it this way:
<textarea name="sum" id="sum" onpaste="frmt()"></textarea>
JS:
function frmt() {
const tar = document.getElementById("sum");
const reg = /[\r\n](?![\r\n])/g;
const str = tar.value;
tar.innerHTML = str.replace(reg, "");
}
What am I missing?
<textarea name="sum" id="sum"></textarea>
<script>
const sum = document.getElementById('sum');
sum.addEventListener('paste', () =>
setTimeout(
() => (sum.value = sum.value.replace(/[\r\n](?![\r\n])/g, '')),
0
)
);
</script>
https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
<textarea> is not supported .innerHTML so you need to set values through .value and you can use oninput event.
This event occurs when the value of an <input> or <textarea> element is changed.
Helpful links:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput
https://www.w3schools.com/jsref/event_oninput.asp
function frmt(id){
const tar = document.getElementById(id);
const reg = /[\r\n](?![\r\n])/g;
const str = tar.value;
tar.value = str.replace(reg, "")
}
textarea{
width: 95%;
height: 160px;
}
<textarea name="sum" id="sum" oninput="frmt('sum')"></textarea>
Related
I'm building a virtual keyboard with vanillla javascript but don't know where to add the onclick event listener to the buttons or how to grab them. I have a printKeys function that loops thru the array and prints them onload, and I have an unfinished typeKeys function where I'm trying to grab the innerhtml and print it to the input field.
HTML
</head>
<body onload="printKeys()">
<div class="text">
<input type="text" class="your-text" id="input" placeholder="Your text here.."></input>
<button class="copy-btn">Copy</button>
</div>
<div class="keyboard" id="keyboard"></div>
<script src="index.js"></script>
</body>
</html>
Javascript
const alphaKeys = ["a","b","c"];
const numKeys = "1234567890";
const keyboard = document.getElementById("keyboard");
// render keyboard
function printKeys() {
for (let i = 0; i < alphaKeys.length; i++) {
let keys = document.createElement("button");
keys.innerHTML = alphaKeys[i];
//add onclick function to button
keyboard.appendChild(keys);
}
}
//onClick event, add text in text field
const input = document.getElementById('input')
function typeKeys() {
console.log("clicked")
//grab input and replace with button innerhtml
}
Instead of adding the event handler to each button, you can apply it to the parent (keyboard) then just use the event's target to get the specific button. I also added the character to a data-attribute instead of the innerHTML.
const alphaKeys = ["a","b","c"];
const numKeys = "1234567890";
const keyboard = document.querySelector(".keyboard");
// render keyboard
function printKeys() {
for (let i = 0; i < alphaKeys.length; i++) {
let keys = document.createElement("button");
keys.innerHTML = alphaKeys[i];
keys.setAttribute("data-character",alphaKeys[i]);
keyboard.appendChild(keys);
}
}
//onClick event, add text in text field
const input = document.getElementById('input')
function typeKeys(character) {
input.value += character;
}
keyboard.addEventListener("click",function(e){
let target = e.target;
if(target.getAttribute("data-character")){
typeKeys(target.getAttribute("data-character"))
}
});
printKeys();
<div class="text">
<input type="text" class="your-text" id="input" placeholder="Your text here..">
<button class="copy-btn">Copy</button>
</div>
<div class="keyboard" id="keyboard"></div>
So I have this transliteration function which I need to execute if the checkbox is checked. The issue is that, the function continues to run after the checkbox is unchecked as well.
const checkBox = document.querySelector("#checkbox");
const input = document.querySelector("#input");
function transRussian(){
ch = ch.replace(/l/g, "л");
ch = ch.replace(/p/g, "п");
return ch;
}
checkBox.addEventListener('change',()=>{
if(checkBox.checked){
transliterate();
}
else{
console.log("transliteration is turned off")
}
});
input.addEventListener('keyup',()=>{
var ch = input.value;
transRussian(ch);
input.value = ch;
});
<input type="checkbox" id="checkbox">
<input type="text" id="input">
In this solution, if the translation checkbox is clicked, the translateBlock() method is called and the text inside the <textarea> element is changed according to the logic.
/* A let variable is declared, not a const, to change the content. */
let checkBox = document.getElementById('checkbox');
let input = document.getElementById('input');
function transRussian(ch){
ch = ch.replace(/l/g, "л");
ch = ch.replace(/p/g, "п");
return ch;
}
function translateBlock(){
var ch = input.value;
input.value = transRussian(ch);
}
/* When the checkbox is clicked, the control variable is set to true. */
input.addEventListener('keyup', () => {
if(checkBox.checked)
translateBlock();
});
/* This method is triggered when data is entered in the <textarea> element. */
checkBox.addEventListener('change', () => {
if(checkBox.checked)
translateBlock();
else
console.log("transliteration is turned off")
});
textarea{
display: block;
}
<span>Translate</span>
<input type="checkbox" id="checkbox"/>
<textarea id="input" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>
I am trying to hide and show the innerHTML of a textarea based on focus and blur. Its working well. But an issue is, when i delete the entered text the inside innerHTML is already there in the element but its not showing. Following is the issue replication steps:
Enter text inside the textarea
Select all the text and delete it
Then mouseout from the textarea
The innerHTML is not visible there in the browser
But innerHTML is visible in the elements when i check with browser inspect element
let textarea = document.querySelectorAll("textarea");
for (i = 0; i < textarea.length; i++) {
let innertext = textarea[i].innerHTML;
textarea[i].addEventListener("focus", (e) => {
e.target.innerHTML = "";
})
textarea[i].addEventListener("blur", (e) => {
e.target.innerHTML = innertext;
})
}
<textarea name="" id="" cols="30" rows="10">Test</textarea>
Use .value instead of .innerHTML to change/retrieve the value of the textarea. The innerHTML property does not update in the browser once a change has been made to the textarea's content.
let textarea = document.querySelectorAll("textarea");
for (i = 0; i < textarea.length; i++) {
let innertext = textarea[i].innerHTML;
textarea[i].addEventListener("focus", (e) => {
e.target.value = "";
})
textarea[i].addEventListener("blur", (e) => {
e.target.value = innertext;
})
}
<textarea name="" id="" cols="30" rows="10">Test</textarea>
This solution is using placeholder:
<textarea name="" id="" cols="30" rows="10" placeholder='Test'></textarea>
let textarea = document.querySelectorAll("textarea");
for(i=0;i<textarea.length;i++) {
let innertext = textarea[i].placeholder;
textarea[i].addEventListener("focus",(e)=>{
console.log( e.target.placeholder);
e.target.placeholder = '';
});
textarea[i].addEventListener("blur",(e)=>{
e.target.placeholder = innertext;
})
}
I want to make such a box (textarea or inputtextfield) with a variable text in there and the variable depends on javascipt variable.
For example:
var a=prompt('some text');
if (a==1) {
link="www.google.com"
} else if (a==2) {
link="www.facebook.com"
}
and I have a textarea or input text field and their value in the text box can change to be either "www.google.com" or "www.facebook.com"
You can achieve it using the following:
HTML
<input type="text" id="textfield" />
<textarea id="textarea"></textarea>
USING JS ONLY
var a=prompt('some text');
var link = '';
if (a==1) {link="www.google.com";}
else if (a==2) {link="www.facebook.com";}
document.getElementById('textfield').value = link;
document.getElementById('textarea').innerText = link;
OR BY USING jQuery
var a=prompt('some text');
var link = '';
if (a==1) {link="www.google.com";}
else if (a==2) {link="www.facebook.com";}
$('#textfield').val(link);
$('#textarea').text(link);
Consider that this is your input field
<input type="text" name="link" />
To set the value to the input field, use the following jQuery code:
var a = prompt("Enter a value :");
var str = "";
var field = $('input[name=link]');
if(a===1)
str = "www.google.com");
if(a===2)
str = "www.facebook.com");
$(field).html(str);
I want to erase the value of textarea if <br> is typed in. Currently I only have the code below. I know the question sounds quite strange but I am trying to use the code with a type effect.
function eraseText() {
document.getElementById("textarea1").value = "";
}
<textarea id="textarea"> text <br /> text </textarea>
<script>
document.getElementById('textarea').onkeyup = function() {
if (/<br \/>/m.test(this.value))
this.value = '';
};
</script>
Example
How about:
document.getElementById("textarea1").onkeyup = function () {
if (document.getElementById("textarea1").indexOf("<br>") !== -1) {
document.getElementById("textarea1").value = "";
}
}