I am trying to create a button that is set into a content editable. It does set the text I input to bold however, I only want it to set the highlighted text bold instead of the whole text. Any help would be appreciated.
function bold(){
const x = document.getElementById("text");
if(x.style.fontWeight == "bolder"){
x.style.fontWeight = "normal";
}else{
x.style.fontWeight = "bolder";
}
}
<button onclick="bold()"> B </button>
<div id="text" class="editor" contenteditable="true" draggable="true"></div>
Your problem will be solved when you update your code like below :
<button onclick="bold()"> B </button>
<div id="text" class="editor" contenteditable="true" draggable="true">Text Example</div>
<script>
function bold(){
if(document.execCommand("bold")){
document.execCommand("normal");
}else{
document.execCommand("bold");
}
}
</script>
Related
Problem
Hi, I have some code that when a button is clicked, all of the content in a contentEditable <p> tag will have a font-weight of 600 (bold).
What I'm wondering is how can I make it so when the button is pressed, rather than style all the content in the p tag to 600 font weight, only style the selected text. For example, if you only highlight the first two words of the p tag and press the button, only the first two words will have their font-weight changed.
Image example
In the example, when the button is pressed, only the first two words would have their font-weight changed.
Link to the fiddle containing code: https://jsfiddle.net/AidanYoung/9tg4oas5/
here is your solution.
function changeBold() {
const text = window.getSelection().toString();
var btn = document.createElement('span');
btn.innerHTML = text;
btn.style.fontWeight = 'bold';
document.execCommand('insertHTML', false, btn.outerHTML);
}
<p contenteditable="true" id="contenttxt">
Some text in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>
You can use the span label and add ID
function changeBold() {
document.getElementById("strongC").style.fontWeight = "600";
}
<p contenteditable="true" id="contenttxt">
<span id="strongC">Some text</span>
in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>
I am looking for a solution how to copy text and then paste a new text automatic in textarea. I found solutions, but based on jquery I'm looking for something simple on clean js.
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
let textarea = document.getElementById("select-this");
textarea.focus();
}
<div class="wrapper">
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br/><br/>
<textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>
I found some solutions, but I still do not know how to make the text automatically appear in textarea after pressing the button.
append the copied value to value of textarea everytime you run copyToClipboard
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
let textarea = document.getElementById("select-this");
textarea.focus();
textarea.value += document.getElementById(elementId).innerHTML
}
<div class="wrapper">
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br/><br/>
<textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>
ummm...You are REALLY over-complicating stuff...
Just use the following JS:
let textarea = document.getElementById("select-this");
textarea.focus();
function changeTextarea(elementId) {
textarea.innerHTML = document.body.querySelector(elementId).innerHTML;
}
and edit the HTML of the buttons as follows:
<button onclick="changeTextarea('#p1')">Copy P1</button>
<button onclick="changeTextarea('#p2')">Copy P2</button>
<button onclick="changeTextarea('#p3')">Copy P3</button>
You don't need to copy and then paste the values of the paragraphs to the <textarea>. Just change it using the innerHTML property...
I've a simple solution for that, just using the part of the code you have.
function copyToClipboard(elementId) {
var text = document.getElementById(elementId).innerHTML;
let textarea = document.getElementById("select-this");
textarea.innerHTML = text;
textarea.focus();
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br><br>
<textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>
I'm rather new to programming, but let's keep going. My goal is to create a button that when pressed it will print out text. If you press a second time, it will print out text below the original snippet and so on. Basically, if you keep clicking the button you'll get text repeated a number of times below each other. Currently I've achieved a button that when pressed it prints out text. Press it again and it does nothing. Here's the code I used:
<input type="button" value="Duplicate Text" onclick="dup()"/>
<p id="clone"></p>
<script>
function dup() {document.getElementById("clone").innerHTML="Text";}
</script>
I'm sure I've done something wrong. Thanks a million.
If you're convinced that it should work, try it. It WILL print out text, but then when you do it a second time, it does nothing.
The below example is self explanatory
DEMO http://jsfiddle.net/YzqML/
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
Another example with checkbox and label
DEMO http://jsfiddle.net/YzqML/1/
<script>
function myFunction() {
var div = document.getElementById('myItems'),
clone = div.cloneNode(true);
document.body.appendChild(clone);
}
</script>
<div id="myItems">
<label>My Label</label>
<input type="checkbox" />
</div>
<p id="demo">Click the button to clone the above items</p>
<button onclick="myFunction()">Try it</button>
You can create new elements and append them to the DOM, like this:
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
Each time you call the display function, the string you give it is added to a new paragraph (p element) on the page, which is added to the bottom of the body.
I note a jquery tag in your question , so you can do this :
<input type="button" value="Duplicate Text" onclick="$('<p />').appendTo('body')"/>
DEMO :
http://jsfiddle.net/abdennour/GZu38/1/
Copy paste this code in an html file and run in a browser. If you could include Jquery, then more simpler the code would be.
<html>
<head>
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</head>
<body>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>
I have a span in div, and dynamic text, like this:
<div>
<span>
dynamic text
</span>
</div>
Is it possible to change font-size until dynamic text is stored in one line (I mean, no line wrapping)?
First you need to get the value inside the span (you must trim it to avoid preceding spaces).
var result = $("div > span").text().trim();
Then simply check the result with your predefined value and change the font-size
if(result == "dynamic text"){
$("span").css("font-size", "50px");
}
Live Demo
You can try this:
function adjust() {
var text = document.getElementById('t');
var input = document.getElementById('a');
text.innerHTML = input.value;
var fontSize = parseFloat(text.style.fontSize);
fontSize -= 0.1;
text.style.fontSize = fontSize + 'px';
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<span id="t" style="font-size: 18px">
dynamic text
</span>
<br/>
<input type="text" id="a" onkeydown="adjust()"/>
</div>
</body>
</html>
Set overflow of div to hidden.
<div id="Div" style="overflow:hidden ">
<span id ="Span" onclick="resize()">
DynamicText
</span>
</div>
The javascript code decrements the font size of the span until the width of the span is less than that of the containing div :
$(document).ready(function(){
{
while(parseInt($('#Span').width()) > parseInt($('#Div').width()))
{
$('#Span').css('fontSize', (parseInt($('#Span').css('fontSize'))-1) +'px');
}
}
JsFiddle Demo
I want to create 2 simple button look like:
For insert and remove hyperlink to my HTML in textarea.
My code is:
function formatDoc(sCmd, sValue) {
oDoc = document.getElementById("textBox");
document.execCommand(sCmd, false, sValue); oDoc.focus();
}
and on body :
<div><img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Inserire lURL','http://');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="link.gif" /></div>
<textarea id="textBox"><p>Lorem ipsum</p></textarea>
But that can't create and add Hyperlink to my element.
What is wrong?
ps: is there simple way to remove link from element?
You can not put hyperlinks in textarea nor html. It is ignored.
you can use this to convert to hyperlinks and show it in div
function ConvertToLinks() {
str = document.getElementById("S1").value;
str = str.replace(/\r\n|\n/g,'<br>');
document.getElementById('txtLinks').innerHTML = str;
}
<textarea rows="5" id="S1" name="S1" cols="40">
Yahoo
Google
Web Developer
</textarea>
<br><button onclick="ConvertToLinks()">Convert to Links</button>
<div id="txtLinks" style="width:350px;min-height:100px;border:1px solid red"></div>