Make text box editable and save it - javascript

I am wanting to make a text box on a webpage that anyone can edit and also save. So when they refresh the page their text is still there.
Here is the simple code I have so far. I can edit it just haven't figured out how to save it.
<div id="example-one" contenteditable="true">
<style scoped>
#example-one { margin-bottom: 10px; }
[contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
[contenteditable="true"]:hover { outline: 2px dashed #0090D2; }
</style>
<p>Save Text</p>
</div>

Here's a minimal example using localStorage:
<div id="example-one" contenteditable="true">
</div>
<p id="save">Save Text</p>
<script>
document.getElementById("save").addEventListener('click', function(el) {
localStorage.setItem("text", document.getElementById('example-one').innerHTML);
});
window.onload = function() {
var text = localStorage.getItem("text");
document.getElementById('example-one').innerHTML = text;
}
</script>

Related

Show the content of the function in the div

How do I show myFunction content in myDiv div? So show "Example"?
function myFunction() {
document.getElementById("demo").innerHTML = "Example!";
}
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
<div class="myDiv">
<p id="demo"></p>
</div>
This code:
<div class="myDiv">
<p> id="demo"</p>
</div>
Should be this:
<div class="myDiv">
<p id="demo"></p>
</div>
With the id tag inside <p>
And this:
function myFunction() {
document.getElementById("demo").innerHTML = "Example!";
}
Should also get called since it is a function and not just the document.getElementById("demo").innerHTML = "Example!";
Example 1:
function myFunction() {
document.getElementById("demo").innerHTML = "Example!";
}
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "Example!";
}
myFunction();
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
<div class="myDiv">
<p id="demo"></p>
</div>
Example 2:
document.getElementById("demo").innerHTML = "Example!";
document.getElementById("demo").innerHTML = "Example!";
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
<div class="myDiv">
<p id="demo"></p>
</div>
You can solve this just by using the getElementById no need for a function.
document.getElementById("demo").innerHTML = "Example!";
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
<div class="myDiv">
<p id="demo"><p>
</div>
I think you are not clear about the concept of html,CSS and js.myDiv is a CSS class.You can beatify the class in it.Whatever html tag uses that class will integrate the proper of .myDiv class. myFunction() is a js function if you use the demo id in your html tag and it will act according to your function defination.

I want to make a 'Spoiler Alert' button

I want to make a 'Spoiler Alert' button.
First of all, I don't know anything.
I'm really sorry.
I'm doing this because I suddenly want to do it.
Anyway, this is my best result.
<button id="change9">Spoiler Alert</button>
<script>
document.getElementById("change9").onclick = function(){
document.body.style.color = '#ffffff';
}
</script>
<p> </p>
Not Spoiler
<p> </p>
<span style="background-color:#000000;">Spoiler</span><br />
But what I really wanted was to have both results. (Not Spoiler/Spoiler)
In other words,
... span style="background-color:#000000;" ...
I want to delete this part by clicking a button.
Is it possible?
I've been looking for it,
But there is only a way to change the entire background color,
and I can't find a way to change the text background color.
here's a fleshed out version of code that handles multiple spoiler alert buttons for each spoiler
document.querySelectorAll(".showspoiler").forEach(function(btn) {
btn.addEventListener('click', function(e) {
document.querySelector(`.${this.dataset.target}`).classList.toggle('show');
});
});
.spoiler {
color: #ffffff00;
background-color: #000000;
}
.spoiler.show {
color: #ffffffff;
}
<button class="showspoiler" data-target="spoiler1">Spoiler Alert</button>
<br/> Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
<button class="showspoiler" data-target="spoiler2">Spoiler Alert</button>
<br/> Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />
Though - the way I'd do it is different, I wouldn't have buttons, I'd just click on the spoiler itself
document.querySelectorAll(".spoiler").forEach(function(btn) {
btn.addEventListener('click', function(e) {
this.classList.toggle('show');
});
});
.spoiler {
color: #ffffff00;
background-color: #000000;
cursor: pointer;
}
.spoiler.show {
color: #ffffffff;
}
Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />
When you click the button, you have to tell the javascript which element to change. We could tell it to change a span tag but you might have more than one. So I put a class on it called "spoiler". And you can then do something like this:
document.querySelector('.spoiler').style.color="#ffffff";
However, it's better (and easier) to work with css and classes. So instead, I set up a class called 'clicked' and now we just add that to the span like this:
document.querySelector('.spoiler').classList.add('clicked');
document.getElementById("change9").onclick = function(e) {
document.querySelector('.spoiler').classList.add('clicked');
}
.spoiler {
background: #000;
color: #000;
display: inline-block;
padding: 5px;
}
.spoiler.clicked {
background: #fff;
color: #f00;
border: 1px solid #f00;
}
<button id="change9">Spoiler Alert</button>
<p> </p>
Not Spoiler
<p> </p>
<span class='spoiler'>Spoiler</span><br />
You are close! Give an ID to the SPAN:
<span id="myspoiler" style="background-color:#000000;">Spoiler</span>
Then change body to your new ID
document.getElementById("myspoiler").style.color = '#ffffff';
Well, here is my snippet:
<button id="change">Spoiler Alert</button>
<br><br>
<span>Not Spoiler</span>
<br><br>
<span class='spoiler' id='spoiled'>Spoiler</span>
.spoiler {
display: none;
}
.show {
display: inline-block;
border: 1px solid red;
text-align: center;
padding: 2px 4px;
color: red;
}
let btn = document.getElementById("change");
let spoilSpan = document.getElementById("spoiled");
btn.addEventListener("click", spoilerAlert);
function spoilerAlert() {
spoilSpan.classList.toggle("show");
}
Thanks to you guys, I got what I wanted.
Thank you.
document.querySelectorAll(".spoiler").forEach(function(btn) {
btn.addEventListener('click', function(e) {
this.classList.toggle('show');
});
});
.spoiler {
display: inline-block;
background-color: #000000;
cursor: pointer;
}
.spoiler.show {
background: none;
}
Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />

p element stuck to divs?

This is a super weird problem. Probably caused by something stupid in my HTML or CSS. I'm learning javascript currently, and I'm making a super simple webpage that demonstrates the dragging ability of javascript. I have two divs, one that floats left and one right, and a p element that should be below the divs. The problem is, I can't separate them. The border of the p element extends into the divs for some reason. I've tried messing with the height of the p element, but then the border isn't even around the text—it's in the divs. I've also tried separating them with margin-top on the p element and that brings the divs down with it. So the elements seem stuck together and I truly don't know why. Here is my code:
var dropzone = document.getElementById("dropzone");
var dropzone2 = document.getElementById("dropzone2");
var text = document.getElementById("text");
var dragging = null;
var wheredrop = null;
function dragover(e){
wheredrop = e.target;
}
function dragend(e){
wheredrop.appendChild(dragging);
wheredrop = null;
dragging = null;
}
function drag(e){
dragging = e.target;
}
text.ondragstart = drag;
text.ondragend = dragend;
dropzone.ondragenter = dragover;
dropzone2.ondragenter = dragover;
document.body.ondragenter = dragover;
<!DOCTYPE html>
<html>
<head>
<title>Test Drag</title>
</head>
<body>
<div id="dropzone" style="border: 1px solid black; width: 49.85%; height: 300px; float: left; margin-top: -50px;"></div>
<div id="dropzone2" style="border: 1px solid green; width: 49.85%; height: 300px; float: right; margin-top: -50px;"></div>
<p id="text" draggable="true" style="border: 1px solid pink; margin-top: 150px;">This is text to drag.</p>
</body>
</html>
You can add a property into your styles display:inline-block .I think it will solve both your issue it will be below div and the border of p would only take the size of the text
You can solve this by clearing the float. Add this <div style="clear: both;"></div> between second/last div and p element. This will clear the effect of float after the divs.
<div id="dropzone" style="border: 1px solid black; width: 49.85%; height: 300px; float: left; margin-top: -50px;"></div>
<div id="dropzone2" style="border: 1px solid green; width: 49.85%; height: 300px; float: right; margin-top: -50px;"></div>
<div style="clear: both;"></div>
<p id="text" draggable="true" style="border: 1px solid pink; margin-top: 150px;">This is text to drag.</p>

simple html editor and get html content using div or textarea

Trying to create a simple html editor.
$('#edit').on('input', function(e){
console.log($(this).html());
});
.edit{
background:gold;
min-height:140px;
font-size:1.6em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='edit' id='edit' contenteditable></div>
type this inside the div edit:
lorem
ipsum
then place the cursor at the end of lorem - and press spacebar and del on keyboard to get this:
lorem ipsum
and you'll see the problem - ipsum has much larger font size then lorem.
That's the first question - how to avoid this?
My second try was using textarea instead of contenteditable div but in that case I cannot use document.execCommand to change some text to be bold etc.
So what is the way to set html tags inside textarea like it's done here on stackoverflow, or on wordpress sites and so on?
My final goal is to provide a simple editor with just a a few commands - bold, italic and align Users should be able to type and style the text, and click on a button should get the html content.
Any help?
As pointed out by many angry developers, contenteditable is indeed terrible - don't expect anything great, but let's try to make do anyway.
By wrapping the editable div inside another div and applying the CSS font to this wrapper, the text shall not get bigger when doing the process described in the question. The HTML is still ugly (useless span tags with 1em of font size), but the text content is acceptable.
const editable = document.querySelector('div[contenteditable]');
editable.onkeyup = () => {
document.querySelector('#html-log').innerText = editable.innerHTML;
document.querySelector('#text-log').innerText = JSON.stringify(editable.innerText);
}
#wrapper {
font-size: 1.2em;
}
div[contenteditable] {
width: 100%;
height: 100%;
border: solid;
font-size: 1em;
}
<div id="wrapper">
<div contenteditable></div>
</div>
<h3>HTML content</h3>
<pre id="html-log"></pre>
<h3>Text content</h3>
<pre id="text-log"></pre>
.execCommand()
Try loading the first parameter dynamically by assigning the #id of each <button> to match a command.
<button id="bold">B</button>
...
... var ID = this.id;
return document.execCommand(ID, false, null)
Demo
$('#WYSINWYE').on('submit', function() {
return false;
});
$('#edit').focus();
$('#edit').on('keyup', function() {
$('#view').html($(this).text());
});
$('#ctrl button').on('click', function() {
var ID = this.id;
if (ID === 'HTML') {
$('#view').slideToggle('750')
return;
}
return document.execCommand(ID, false, null);
});
form {
width: 100%;
height: fit-content;
font: 400 16px/1.25 Arial;
}
#view {
background: gold;
min-height: 100px;
font: inherit;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
#ctrl {
height: 20px;
}
#edit {
font: inherit;
font-family: Consolas;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
button {
display: inline-block;
font: inherit;
width: 36px;
height: 24px;
line-height: 24px;
margin: 0 -2px;
vertical-align: middle;
cursor: pointer;
border-radius: 1px;
}
b:hover,
button:hover {
color: rgba(205, 121, 0, 0.8);
}
#HTML {
float: right
}
#ctrl button:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#ctrl button:nth-of-type(6) {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
#ctrl button:last-of-type {
border-radius: 4px;
}
<link href="//use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<form id='WYSINWYE'>
<fieldset id='view' class='text' contenteditable='false' style='display:none'>
</fieldset>
<fieldset id='ctrl'>
<button id='bold' class="fas fa-bold"></button>
<button id='italic' class="fas fa-italic"></button>
<button id='underline' class="fas fa-underline"></button>
<b>|</b>
<button id='justifyLeft' class="fas fa-align-left"></button>
<button id='justifyCenter' class="fas fa-align-center"></button>
<button id='justifyRight' class="fas fa-align-right"></button>
<button id='HTML' class="fas fa-code"></button>
</fieldset>
<fieldset id='edit' class='text' contenteditable='true'>
</fieldset>
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

copying localStorage using javascript

Good Evening Stackoverflow!
So I am running into an issue in which I am trying to create a notes app using javascript and I wanted to play around with localStorage. I have tried a couple of options but I can't seem to select all and then copy to the clipboard the localStorage, has anyone else ran accross this before?
<!DOCTYPE html>
<html>
<head>
<title>NotePad</title>
<style>
body {
font-family: Tahoma;
line-height: 1.6em;
background: #f4f4f4;
}
header, footer {
text-align: center;
}
#container {
width: 400px;
margin: 50px auto;
background: #FFFFa5;
overflow:hidden;
padding: 30px;
}
.clear {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
.copy {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
</style>
<script>
function getNote(){
if(localStorage.getItem('note')){
var note = localStorage.getItem('note');
} else {
var note = 'Go ahead and edit this note to save in local storage';
}
document.getElementById('note').innerHTML = note;
}
function saveNote(id){
var note = document.getElementById('note').innerHTML;
localStorage.setItem('note', note);
}
function clearNote(){
clear: localStorage.clear();
return false;
}
function copyNote(){
$("#note").select();
document.execCommand("copy");
return false;
}
</script>
</head>
<body>
<header>
<h1>My Notes!</h1>
</header>
<section id="container">
<div id="note" contenteditable="true" onkeyup='saveNote(this.id)'></div>
</section>
<footer>
<div>
Clear Note
</div>
<br>
<div>
Copy
</div>
<p>MyNote © 2017</p>
</footer>
<script>
getNote();
</script>
</body>
</html>
The select method does not select text. It fires the select event on that element (pretends the user selected that element themself), and since you have no event handlers for the select element, nothing happens. This question should help you create a function that selects your text.

Categories