I have a field where a user can input raw HTML. This looks like:
<input type="text" id="editor" value="<p>Hi,</p><p>Here is a <a href='domain.com'>link</a> I'd like you to visit.</p>" />
Now, I need a "copy to clipboard" button that takes the content of this field in such a way that we can paste it as formatted text (without the HTML markup). In the example above, the copy/paste output should be:
Hi,
Here is a [link][1] I'd like you to visit.
I've implemented the "copy to clipboard" button like this:
let answer = document.getElementById("editor");
answer.select();
document.execCommand("copy");
This places the content of the input on the clipboard, however when I paste it elsewhere I get the raw HTML.
I need some way to convert HTML into formatted text, but the only solution I found is this and it doesn't work for links:
enter link description here
Is there a native Javascript way to do this? If not, what is the best solution?
Try with Element.insertAdjacentHTML()
let answer = document.getElementById("editor");
let result = document.getElementById("result");
let button = document.getElementById("button");
button.onclick = function() {
answer.select();
document.execCommand("copy");
};
function conVert(event) {
event.preventDefault();
let val = answer.value
console.log(val)
result.insertAdjacentHTML('afterbegin', val);
// you can use event.target here to past it as formated to targeted element onpaste
}
// on button
buttonpaste.onclick = function(event) {
conVert(event)
}
//on paste
document.onpaste = function(event) {
console.log("Paste")
conVert(event)
};
#result {
min-height: 100px;
background-color: yellow
}
#result2 {
min-height: 100px;
background-color: gray;
}
<input type="text" id="editor" value="<p>Hi,</p><p>Here is a <a href='domain.com'>link</a> I'd like you to visit.</p>" />
<button id="button">COPY</button>
<button id="buttonpaste">PASTE</button>
<div id="result" contentEditable="true"></div>
<div id="result2" contentEditable="true"></div>
Related
I'm trying to find a way to modify the value of my lightning-textarea.
Not the variable that holds the value internally.
Things like document.getElementById('textarea').value = 'value'; are not working.
My Textarea:
<lightning-textarea id="textarea" type="text" label="Enter some text" onchange={handleInputChange}></lightning-textarea>
Thanks!
In the solution below, clicking the item changes its content. The Element.innerHTML property or the Element.insertAdjacentHTML() method can be used to change the content of the element.
let textarea = document.getElementById("textarea");
let textarea2 = document.getElementById("textarea2");
/* Clicking on the item fires the following event. */
textarea.addEventListener('click', function(event) {
textarea.innerHTML = "Clicked First Element";
});
/* Clicking on the item fires the following event. */
function clickEvent() {
try {
this.textarea2.innerHTML = "Clicked Second Element";
}
catch(error) {
console.log(error);
}
}
#textarea, #textarea2 {
border: 1px solid red;
padding: 10px;
}
<!-- First Element -->
<br><lightning-textarea id="textarea" type="text" label="Enter some text">First</lightning-textarea><br><br><br>
<!-- Second Element -->
<lightning-textarea id="textarea2" type="text" label="Enter some text" onclick="clickEvent()">Second</lightning-textarea>
I'm attempting to set up a simple way for a non-tech-savvy person to update a marquee ticker that will appear on a website that would be published to our BrightSign display system. I was think that they could easily type what they want into a text file, save it, and "republish" the website to our display system. All the files (index.html, style.css, tickerText.txt) would be saved locally on a computer for the person in charge to edit the marquee.
Everything works well when I type in the text between my marquee tags, but when I attempt to pull in the info from a text file, it scrolls across with a large amount of "white space" and not as long text. The below script shows when it comes out correctly (shown in picture link -- wouldn't let me embed).
Long Text Marquee
<!-- Bottom Marquee Ticker -->
<div class="3-row-padding w3-center">
<div class="w3-container ocacity75"">
<div class="w3-card-4 w3-white w3-round ticker">
<marquee>This is a test and so is this</marquee>
</div>
</div>
</div>
The below script is when I try to populate the marquee from a text file and then messes up my formatting (shown in picture -- wouldn't let me embed).
Incorrect Formatting Marquee
<!-- Bottom Marquee Ticker -->
<div class="3-row-padding w3-center">
<div class="w3-container ocacity75"">
<div class="w3-card-4 w3-white w3-round ticker">
<marquee><object type="text/html" data="./TickerText.txt"></object></marquee>
</div>
</div>
</div>
I even tried adding in-line styling to the object tag to try to make the marquee not so large and to increase the text size, but nothing seems to work. I may be going about this wrong with trying to read in a text file. I tried some JavaScript, but I couldn't get it to work and though just a marquee tag would do just fine. Any help would be a appreciated.
To confirm, I did not use AJAX as the website doesn't show its changes on the display system until we hit the publish button again. So live updates to the website without refreshing would be overkill.
Well, you could try this:
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function() {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function(e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
#styleTest {
color: green;
}
<input type="file" id="myFile">
<div id="styleTest">
<div id="output"></div>
</div>
This will work for what you want, also the data in the text file would be able to be formated if needed.
As said in the comment by A Haworth,
The <marquee></marquee> tag is now deprecated.
Also, you could bypass even having a text file by doing this:
(Note: this one is better suited to your needs, for now.)
var input = document.getElementById("input");
var output = document.getElementById("output");
var txtInSub = document.getElementById("txtInSub");
function addData() {
output.innerHTML = input.value;
}
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
e = e || window.event;
var key = e.which || e.keyCode;
// key == "13" is the enter key
if (key == "13") {
txtInSub.click();
console.log({keyPressed: "Enter", functionExecution: "Submitted the Text Input Field", contentPosted: input.value});
}
}
#styleTest {
color: green;
}
#inSubFld {
text-align: center;
width: 98.22%;
position: absolute;
left: 0;
top: 60px;
}
#input {
width: 100%;
padding: 10px;
display: block;
}
#txtInSub {
display: none;
}
<div id="styleTest">
<div id="output"></div>
</div>
<div id="inSubFld">
<input id="input" type="text" autofocus> <!-- with autofocus it should force it so that you could type in the input field without needing to click it -->
<button id="txtInSub" onclick="addData()">Submit</button>
<p>Press Enter to Submit the content in the field above.</p>
</div>
I was wondering if I can create a text input where users can type some text and then immediately display them on page, same as twitter. I know about alert window or prompt window but I need something different, a text input on website.
Hope it can be done in JavaScript.
Use .keyup() for the input field then replace the content of the output div.
$(".div-input").keyup(function() {
$(".output").html($(this).val());
});
.output {
margin-top: 20px;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="div-input" />
<div class="output">
</div>
If you want to display the input on submit, you could attach a .submit() event on a form tag then use appendTo on the div if you want to insert multiple elements;
$(".form-input").submit(function(e) {
e.preventDefault();
var value = $(".div-input").val();
$("<div class='outputs'>" + value + "</div>").appendTo($(".output"));
});
.output {
margin-top: 20px;
}
.outputs {
padding: 20px;
font-size: 2em;
border: 1px solid black;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-input">
<input class="div-input">
<button type="submit">Submit</button>
</form>
<div class="output"></div>
you can use this to show your text anywhere on page
<input id="input-name" oninput="outputname.value = this.value">
<output id="outputname" name="outputname" for="input-name"></output>
You can test it here
If you add an eventlistener to the input, you can use that to change the text in your output area on the page. Like this:
const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('input', (e) => {
output.innerHTML = input.value;
});
<div id="output"></div>
<input type="text" id="input">
HTML:
<p>Input:</p><input id="input" type="text">
<p>Output:<span id="output"></span></p>
Javascript:
// Function To Select Element
function $(element) {
return document.querySelector(element);
}
// We will get the input when calling this function
function getInput() {
return $('#input').value;
}
// The output will be displayed
function output() {
$('#output').innerHTML = getInput();
}
// This function will start our code
function init() {
output();
}
// On keyup our code will initiate
$('#input').addEventListener('keyup', init);
You can test it here: https://codepen.io/anon/pen/ReyGaO?editors=1111
People are downvoting you because this can be done with very basic JavaScript, and questions like this are very unusual because anyone doing a basic JavaScipt course will probably be able to do this.
Theoretically speaking: you can put an input element and a button on the html page, plus an empty div. You can set an event for the button or even for the input for live updating while typing, and write an event handler function to change the content of the empty div. You can either set its content or add a new child to it, so that the previous content still remains.
Practical example: (The code below is live at https://codepen.io/bradib0y/pen/YJLGrb )
<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new post.</p>
<input id="NewPostField" type="text" value="Some text">
<button onclick="myFunction()">Add new post</button>
<div id="Posts"></div>
<script>
function myFunction() {
var NewPostField = document.getElementById("NewPostField");
var newPost = document.createElement("p");
newPost.innerHTML = NewPostField.value;
var Posts = document.getElementById("Posts");
Posts.appendChild(newPost);
}
</script>
</body>
</html>
you can do it by this
<input id="mainInput" oninput="output.value = this.value">
<output id="output" name="output" for="input-name"></output>
click here to view in jsFiddle
Well, as I was searching on the internet for some basic codes to examine - I found this one. A simple code which is supposed to copy the selected text. As i am a complete newbie in JS, I check the meaning of the methods that I didn't understand - and rewrited the code, as i make a few adjustments.
And still the code is not working and If someone can explain - this part ""copyit(this.form.select1)"" - Even though I kind of understand "this" - i am not able to understand what is doind here
function copyit(theField) {
var selectedText = document.getSelection();
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
This is the original code - and it is not working either
<SCRIPT LANGUAGE="JavaScript">
function copyit(theField) {
var selectedText = document.selection;
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
And in the body of your web page, add the following where you want the text to appear:
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
onclick="copyit(this.form.select1)"
executes the copyit() function and passes a variable which is later named theField. The variable that is passed is this.form.select1 which is a textarea with ID select1 which is located in the same form as the input you're clicking hence the this.form.
As to why your code isn't working - you should include here the original code before your adjustments. You probably deleted/changed something you shouldn't have.
I'm not sure what you're asking. Are you asking to, when someone clicks on any button/div, it copies a text you want for his clipboard? If no, ignore my comment, if yes, i'll explain:
First place, where should an user click?
<a class="btn" CopydivFunction(#text)">CLICK ME TO Hello.</a>
Now, add the function with JS.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Now, place the text you want somebody to copy (hide it):
<h1 id="text" class="hidden">some text. This part won't be seen because of the hidden class, and this is the text that will be copied to your clipboard.</h1>
Place display:none on css:
#text{
display:none;
}
I think you have to add that, so nobody sees it.
And that should be it, click the <a> and you get the text in the h1#text
I need your help,
How can I go about copying text (with the line breaks included) from my table and put it back into the textarea “newtext”
My existing coding doesn't seem to be working.
<html>
<head>
<style type="text/css">
.box { width: 400px; height: 50px; }
</style>
<script type="text/javascript">
function ta() {
taValue = document.getElementById("ta").value
taValue = taValue.replace(/\n/g, '<br/>')
document.getElementById("tatext").innerHTML = taValue
}
function text2area() {
document.getElementById("newtext").innerHTML = document.getElementById("tatext").innerHTML
}
</script>
</head>
<textarea class="box" id="ta" onkeyup="ta()"></textarea>
<table id="tatable"><tr><td><div id="tatext"></div></td></tr></table>
<br>
<input type="button" onclick="text2area()" value="move text">
<br><br>
<textarea class="box" id="newtext"></textarea>
</html>
Instead of using the function innerHTML, grab the value of the text area you want to capture, and set the value of the new text area to this. You are already using value for the variable taValue. Also, it's better practice to use addEventListener for your clicks and keyups.
function ta() {
taValue = document.getElementById("ta").value
taValue = taValue.replace(/\n/g, '<br/>')
document.getElementById("tatext").value = taValue;
}
function text2area() {
taValue = document.getElementById("ta").value;
document.getElementById("newtext").value = taValue;
}
document.getElementById("ta").addEventListener ("onkeyup", ta, false);
document.getElementById("move-text").addEventListener ("click", text2area, false);
JSFiddle: http://jsfiddle.net/tMJ84/1/
textarea does not have an innerHTML. Notice how you grabbed the value? Set it the same way! It is like this because it is a form element.
document.getElementById("tatext").value = taValue; //semi-colons are just good practice
and here:
document.getElementById("newtext").value = document.getElementById("tatext").value;