I have an HTML5 file and I am trying to make an app like Google Docs using create-electron-app.
I have a textarea tag for the input, and I am trying to bold the text the user has selected. I have the getSelectedText() function working and It is returning a string like expected, but I need to bold that text inside of the textarea. If you have used Google Docs you should know what I mean.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Make word documents!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<textarea class="userInput"></textarea>
<input type="button"
value="Bold"
onmousedown="bold()">
<script>
function getSelectedText() {
if (window.getSelection) {
return "" + window.getSelection();
} else if (document.selection && document.selection.type == "Text") {
return document.selection.createRange().text;
}
return "";
}
function bold() {
var userInput = getSelectedText();
// userInput.style.fontWeight = "bold";
// print the type of the userinput variable
console.log(typeof userInput);
}
</script>
</body>
</html>
It isn't possible to bold text inside of a textarea, however, it is possible to bold text inside of a div.
A div can behave like a textarea by setting it to contentEditable -- <div contentEditable></div>.
Conveniently, Javascript has a built in function to bold selected text, document.execCommand("bold").
By using both editable divs and Javascript built in functions, it is possible to create an app like Google Docs that can bold selected text.
document.getElementById("bold_button").onclick = function() {
document.execCommand("bold");
}
<div contentEditable id="text">
The World Before the Flood is an oil-on-canvas painting by English artist William Etty, first exhibited in 1828. It depicts a scene from John Milton's Paradise Lost in which Adam sees a vision of the world immediately before the Great Flood. The painting illustrates the stages of courtship as described by Milton: a group of men select wives from a group of dancing women, take their chosen woman from the group, and settle down to married life. Behind them looms an oncoming storm, a symbol of the destruction which the dancers and lovers are about to bring upon themselves. When first exhibited at the 1828 Royal Academy Summer Exhibition, the painting attracted large crowds. Many critics praised it, but others condemned it as crude, tasteless and poorly executed. The painting, currently in the Southampton City Art Gallery, and a preliminary oil sketch for it, now in the York Art Gallery, were exhibited together in a major retrospective of Etty's work in 2011 and 2012
</div>
<button id="bold_button">Bold</button>
Related
This question already has an answer here:
contentEditable cursor's parent element
(1 answer)
Closed 4 years ago.
$("#paragraph").html("<span>The Faculty Development Programme would enable identification and preparation of relevant course transaction resources.</span><span> These resources include Reference Books, Films, PPTs, Case Lets and Case Studies Work Education, Experiential Learning and its various aspects, Village Project Work and Field Work and Preparation of Village Social and Resource Maps.</span>");
function detectSentence(){
//console.log("Iam here");
if (window.getSelection && (sel = window.getSelection()).modify) {
selection = window.getSelection();
selection.extend (selection.focusNode.parentNode, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div contenteditable="true" id="paragraph">
</div>
<br><br>
<button type="button" onclick="detectSentence()" id="btn">
Detect Sentence
</button>
I have a div which contains a paragraph, this paragraph can have more than 1 sentence. I am enclosing these sentences in a span tag, so that each sentence is separated. So sentence boundaries are already identified in the text. Now when the focus is anywhere in this div, is there a way to detect the sentence where the cursor belongs to.
I had tried using window.getSelection();, but couldn't attain a solution of how to use this method. My question is there a way to move the selection to the nearest opening and closing span tag surrounding the cursor so that the corresponding sentence will be highlighted where the cursor is present.
Using this snippet I am able to select text up to starting sentence tag but the ending sentence tag is not being highlighted. To test the snippet click anywhere in the div and click on the button Detect Sentence.
This code gives you the element cursor is on or element with selected content.
$("#paragraph").html("<span>The Faculty Development Programme would enable identification and preparation of relevant course transaction resources.</span><span> These resources include Reference Books, Films, PPTs, Case Lets and Case Studies Work Education, Experiential Learning and its various aspects, Village Project Work and Field Work and Preparation of Village Social and Resource Maps.</span>");
detectSentence = function(){
var node = document.getSelection().anchorNode;
sentenceElem = node.nodeType == 3 ? node.parentNode : node;
console.log(sentenceElem)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="paragraph">
</div>
<br><br>
<button type="button" onclick="detectSentence()" id="btn">
Detect Sentence
</button>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have a text inside an HTML tag <p>text</p>, then I have a <form> and a <input type="text"> inside and a submit.
The goal of the exercise: when I write characters in the input then I click on button (submit), or any other word, or not a complete word, or (,.!!),it has to be underlined with the red color in the text the space has not to be underlined .here s my code below :example I write "Anyone" then I submit, I mean the first word in the text , all the words "anyone" have to be underlined in red.
var x = document.getElementById('text').innerHTML;
var splt = x.split(/\W+/);
console.log(splt);
var inpt=document.getElementById('input').value;
console.log(inpt);
var lent = splt.length;
console.log(lent);
var myArray =[" "];
for( i = 0; i < splt.length ; i++ ){
myArray.push(splt[i]);
}
console.log(myArray);
for(var j=0;i<myArray.length;i++){
for(var k=0;k<myArray[i].length;k++){
if((myArray[j]==splt)){
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-5">
<form class="form-group" action="index.html" method="post">
<input type="text" name="" value="" id ="input" onkeyup="find()" placeholder="cerca">
<button class ="Btn btn-danger" type="button" name="button">search</button>
</form>
<h1>hello</h1>
<p class="text-justify" id = "text">Anyone who reads Old and Middle English literary texts will be familiar with the mid-brown volumes of the EETS, with the symbol of Alfred's jewel embossed on the front cover. Most of the works attributed to King Alfred or to Aelfric, along with some of those by bishop Wulfstan and much anonymous prose and verse from the pre-Conquest period, are to be found within the Society's three series; all of the surviving medieval drama, most of the Middle English romances, much religious and secular prose and verse including the English works of John Gower, Thomas Hoccleve and most of Caxton's prints all find their place in the publications. Without EETS editions, study of medieval English texts would hardly be possible.</p>
<p class="text-justify" id = "text">As its name states, EETS was begun as a 'club', and it retains certain features of that even now. It has no physical location, or even office, no paid staff or editors, but books in the Original Series are published in the first place to satisfy subscriptions paid by individuals or institutions. This means that there is need for a regular sequence of new editions, normally one or two per year; achieving that sequence can pose problems for the Editorial Secretary, who may have too few or too many texts ready for publication at any one time. Details on a separate sheet explain how individual (but not institutional) members can choose to take certain back volumes in place of the newly published volumes against their subscriptions. On the same sheet are given details about the very advantageous discount available to individual members on all back numbers. In 1970 a Supplementary Series was begun, a series which only appears occasionally (it currently has 24 volumes within it); some of these are new editions of texts earlier appearing in the main series. Again these volumes are available at publication and later at a substantial discount to members. All these advantages can only be obtained through the Membership Secretary (the books are sent by post); they are not available through bookshops, and such bookstores as carry EETS books have only a very limited selection of the many published.</p>
</div>
</div>
</div>
function highLightText(){
var characters = $('#text');
var pageText = characters.text().replace("<span>","").replace("</span>");
var searchedText = $('#input').val();
var theRegEx = new RegExp("("+searchedText+")", "igm");
var newText = pageText.replace(theRegEx ,"<span>$1</span>");
characters.html(newText);
}
#text span
{
text-decoration: underline;
text-decoration-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SEARCH</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-5">
<input type="text" name="" value="" id ="input" onkeyup="find()" placeholder="cerca">
<button class ="Btn btn-danger" type="button" name="button" onclick="highLightText()">search</button>
<h1>hello</h1>
<p class="text-justify" id = "text">
Anyone who reads Old and Middle English literary texts will be familiar with the mid-brown volumes of the EETS, with the symbol of Alfred's jewel embossed on the front cover. Most of the works attributed to King Alfred or to Aelfric, along with some of those by bishop Wulfstan and much anonymous prose and verse from the pre-Conquest period, are to be found within the Society's three series; all of the surviving medieval drama, most of the Middle English romances, much religious and secular prose and verse including the English works of John Gower, Thomas Hoccleve and most of Caxton's prints all find their place in the publications. Without EETS editions, study of medieval English texts would hardly be possible.
As its name states, EETS was begun as a 'club', and it retains certain features of that even now. It has no physical location, or even office, no paid staff or editors, but books in the Original Series are published in the first place to satisfy subscriptions paid by individuals or institutions. This means that there is need for a regular sequence of new editions, normally one or two per year; achieving that sequence can pose problems for the Editorial Secretary, who may have too few or too many texts ready for publication at any one time. Details on a separate sheet explain how individual (but not institutional) members can choose to take certain back volumes in place of the newly published volumes against their subscriptions. On the same sheet are given details about the very advantageous discount available to individual members on all back numbers. In 1970 a Supplementary Series was begun, a series which only appears occasionally (it currently has 24 volumes within it); some of these are new editions of texts earlier appearing in the main series. Again these volumes are available at publication and later at a substantial discount to members. All these advantages can only be obtained through the Membership Secretary (the books are sent by post); they are not available through bookshops, and such bookstores as carry EETS books have only a very limited selection of the many published.
</p>
</p>
</div>
</div>
</div>
</body>
</html>
Reference
Alright! I tried in Vanilla JS. Have a look https://codepen.io/navdeepsingh/pen/bLjqyy``
const search = document.querySelector('#search');
const wrapper = document.querySelector('#wrapper');
const wrapperText = wrapper.innerHTML;
let newText = '';
search.addEventListener('keyup', function() {
const regex = new RegExp(this.value, 'g');
if (this.value.length > 3) {
if (wrapperText.includes(this.value)) {
newText = wrapperText.replace(regex, `<span class="hl">${this.value}</span>`);
wrapper.innerHTML = newText;
}
} else {
const hlElems = document.querySelectorAll(".hl");
hlElems.forEach(el => {
el.classList.remove('hl');
});
}
});
.hl {
background-color: gold;
}
<input type="text" placeholder="Search.." id="search" name="search" autofocus>
<div id="wrapper">
<p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>
I have a table with some data in it. Data in 2 columns is just one or two words, but the third column contains around 1000 caracters, I want that one column's data to toggle when clicked on a link.
Here is the code I tried:
HTML
<div class="content">
<h2>Pretrazi pesme</h2> </br>
<form action="" method="post">
Zanr: <input type="text" name="zanr" id="idZanrInput" placeholder="Zanr pesme" onkeyup="sugestija(document.getElementById('idZanrInput').value)">
<div id="nazivZanraDiv"></div>
<br/>
Postojeci zanrovi: "Pop", "Rock", "House", "Metal" i "Hip-hop".
</br><br/>
<input type="submit" name="unos" value="OK">
</form>
Niste uneli prihvatljiv zanr, pa prikazujemo sve pesme iz baze. <table>
<tr>
<td><b>Naziv</b></td>
<td><b>Izvodjac</b></td>
<td><b>Tekst</b></td>
<td><b>Zanr</b></td>
</tr>
<tr>
<td>Simple boy</td>
<td>Karnivool</td>
<td ><p id="tekst">I'm high above the world
Why should I feel pain
Or feel alone
To be protected like a simple boy
If I choose to let you down
Begin to know
You're free to go
You're free to go
I will fight until there's nothing left
Cross the world together from this sinking ship
Or drown alone
Off the coast
Facing nothingness
Drawn to feel the emptiness
Oh help me now
Describe the scene
You're free to go
(We'll face these things some other day)
You're free to go
(I won't leave you you're not ok)
You're free to go
(We'll face these things some other day)
You're free to go
(I won't leave you you're not ok)
Simple boy, stay here
Simple boy, don't wander
Simple boy, you're safe here
Simple boy, simple boy
So when did we lose the plot
Were running against the clock
Don't hesitate
Or you will never know
Simple boy, you're free to go
Don't wander, you're free to go
Simple boy, you're free to go
You're safe here, you're free to go
You're free to go
You're free t</p>[...]</td>
<td>metal</td>
CSS:
#tekst{
height:60px;
line-height:15px; /* Height / no. of lines to display */
overflow:hidden;
}
JavaScript:
function toggle(#tekst) {
var state = document.getElementById(#tekst).style.display;
if (state == 'hidden') {
document.getElementById(#tekst).style.display = 'block';
} else {
document.getElementById(#tekst).style.display = 'none';
}
}
Instead of display I tried using overflow, writing some scripts, but nothing seems to work.
Okay, you have a lot of issues in your JavaScript.
You cannot use #tekst as a parameter.
Replace the #tekst to tekst.
Pass this instead of anything else.
Use ternary operators instead of simple if and else.
There's no hidden.
Here's your code:
function toggle(tekst) {
var state = tekst.style.display;
if (state == 'hidden') {
tekst.style.display = 'block';
} else {
tekst.style.display = 'none';
}
}
Instead of the above one, use this:
function toggle(tekst) {
tekst.style.display = (tekst.style.display == 'none') ? 'block' : 'none';
}
<td ><p id="tekst"><?php echo $red->tekst?></p><a href="#" onclick="toggle(this)";>[...]</a></td>
Only if you post your full HTML, we can help you out fully. The meaning of full HTML is, once you have done it using PHP, you may need to View Source of the rendered page and copy the relevant code from there.
Ok. I've created a simple fiddle here.
HTML:
Click me
<br/>
<br/>
<table>
<tr>
<td>Some text..</td>
<td>Some more text..</td>
<td>Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
</td>
</tr>
</table>
CSS:
table { border:1px solid #000; }
td { border-right:1px solid #000; }
td:last-child { border-right:none; }
td.hideMe { display:none; }
JS:
$('#test').click(function(){
$('td:last-child').toggleClass('hideMe');
});
I don't know how your page is layed out. But this is working solution. You need to use jQuery's toggleClass OR toggle to hide and unhide the given element. I've used a last-child selector in my example. You may have an ID or specific class to call instead. But I assume you can edit the code accordingly.
I am being asked to add superscript to the text that appears in a browser tab.
The tab always shows the the contents of the <title> tag so does anybody know if this is in fact possible?
No, it's not possible. The tab text is the document title, and doesn't support HTML in any browser I've ever seen.
You could get the HTML entity code for a few superscript numbers (² is superscript 2), I suppose.
The general answer is that you cannot use any markup in a title element (this is not just a formal requirement—browsers do not recognize any markup there), so you are limited to what can be done in plain text. There is a relatively large set of superscript characters in Unicode, but they have been added according to specific use in various contexts rather than systematically adding superscript versions of characters. Moreover, support to most of these characters in fonts is rather limited, and browsers may render title element using a specific font that you cannot change (as an author).
Regarding the specific question mentioned in a comment, about letters MC, there is a superscript M character, though it is meant for use in phonetic notations, and there is no superscript C character.
Depends on what characters you want to put in the superscript. If there are Unicode superscript characters for what you want to display, try something like:
<head>
<title>E = mc²</title>
</head>
If you want something like HTML in the tag:
Widget<sup>TM</sup> Model 6100
Then you can try (tested on Chromium - it works on clicking):
<html>
<head>
<title> change the text of the title bar -- IE11, Chrome, Chromium only </title>
<style>
h1 {background-color:darkblue;color:dodgerblue}
.short {font-size:5px}
a {height:40;font-family:Arial;background-color:darkgoldenrod;color:lime}
a:hover {background-color:darkcyan;color:powderblue}
a.bluedark { color:#4a4c79;}
</style>
<script language="JavaScript">
function newTitle()
{
parent.document.title=document.getElementById('stuff').innerHTML;
}
</script>
</head>
<body>
<h1 align="center"> Change Title Bar -- IE11, Chrome, Chromium Only </h1>
<div align="center">
<a class="bluedark" href="JavaScript:;" onClick="newTitle();return false" onFocus="this.blur()">
<br /> Click to Change Title
</a>
<div id='stuff'>some ™ stuff</div>
</body>
</html>
I'm working on a web app that allows a user to select some text, click a button, and save the highlighted text. This works great in desktop browsers, (chrome for this example), but in iOS I'm having issues with the native text selection, where the user can change the selected text.
Here is the JsFiddle showing the issue (issue only exists in iOS): http://jsfiddle.net/JasonMore/gWZfb/
User starts text selection
User expands their text selection, and clicks "Show the selected text above"
Only the first selected word "The" shows up, even though I want "The Path of the righteous man"
1 Begin
2 Select Text and hit button
3 Only "The"
Here is the JS I am using:
$(function() {
$('#actionButton').click(function() {
$('#result').text(selectedRange.toString());
});
$('#slipsum').on('mouseup touchend','p', function() {
getSelectedRange();
});
});
var selectedRange = null;
var getSelectedRange = function() {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
};
HTML:
<h3>Selected Text:</h3>
<p id="result">
</p>
<br/>
<p>
<input type="button" id="actionButton" value="Show the selected text above" />
</p>
<!-- start slipsum code -->
<div id="slipsum">
<h1>Is she dead, yes or no?</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>So, you cold?</h1>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
<h1>I'm serious as a heart attack</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>Is she dead, yes or no?</h1>
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
<h1>Is she dead, yes or no?</h1>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
</div>
<!-- please do not remove this line -->
<div style="display:none;">
lorem ipsum</div>
<!-- end slipsum code -->
To anyone who stumbles upon this issue in the future, here is the resolution:
http://jsfiddle.net/JasonMore/gWZfb/
$(function() {
$('#actionButton').click(function() {
if (selectedRange) {
$('#result').text(selectedRange.toString());
clearInterval(timer);
}
});
timer = setInterval(getSelectedRange, 150);
});
var timer = null;
var selectedRange = null;
var getSelectedRange = function() {
try {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
} catch (err) {
}
};