Is it possible to get the 'text' which I will get back on undo. For Example: I have two paragraphs
Para1
Para2 <--- deleting para2 using backspace
When I will do ctrl+z or undo , para2 will be retrieved back. Is there any way in javascript to get that 'para2' will be returned in the undo option (I want to get 'para2' in some js variable. I know it will come in editor automatically) ? Search a lot but didn't get any solution. Any help will be highly appreciated
P.S: I need this because I want to remove some attributes in my html on undo.
UPDATE 2
Due to OP's question changes, I will address this one last time.
P.S: I need this because I want to remove some attributes in my html on undo.
Undo Retrieves deleted text
Delete Removes text
If you have a ton of attributes in your html, use the text editor's replace feature. What text editor do you use?
UPDATE 1
Added a new function getUndone(). Do the following to test it:
Delete some text.
click the ⤺ button.
click the Get button.
The undone portion of text will be back as expected.
The undone text is also stored in a variable (i.e. sel).
The undone text is also in clipboard.
The undone text is displayed as well.
Used execCommand('undo') to undo.
Used execCommand('copy') to store in clipboard.
Used window.getSelection() to retrieve selected text and store in sel.
Used .toString() to display undone text.
execCommand API is made for creating text editors. It has a ton of methods and properties. The following Snippet has bold, italics, underline, and undo.
document.execCommand( 'undo',false,null);
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
body {
font: 400 16px/1.4'serif';
}
#editor1 {
border: 3px inset grey;
height: 100px;
width: 381px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 358px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
<div id="editor1" contenteditable="true">
The quick brown fox jumped over the lazy dog.
</div>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
</button>
<button class="fontStyle" onclick="document.execCommand( 'undo',false,null);"><b>⤺</b>
</button>
<button class="fontStyle" onclick="getUndone()">Get</button>
<br/>
<label for='data'>Data:
<input id="data">
</label>
</fieldset>
<script>
function getUndone() {
var data = document.getElementById('data');
var sel = window.getSelection();
document.execCommand('undo', false, null);
document.execCommand('copy', false, null);
data.value = sel.toString();
}
</script>
Related
I have an input field where I would like to have the characters turn red after the 10th symbol.
So far I have:
var street_1 = document.getElementById('street_1');
street_1.style.color = "red";
Which changes the color of all the characters. Then I tried using:
street_1.value.substring(10,100).style.color = "red";
which of course didn't work since .style as I learned only works for the entire field and not just the value.
Since im completely new to JS I really have no idea how to approach this.
You can hide the input field, and add another span element that displays its value as follows:
HTML:
<div>
<input type="text">
<span class="text"></span>
</div>
CSS:
input {
opacity: 0;
width: 100%;
}
div {
position: relative;
border: 1px solid #000;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.red {
color: red;
}
JS:
var span = document.querySelector('span');
var input = document.querySelector('input');
input.addEventListener('keydown', function(evt) {
var value = evt.target.value;
span.innerHTML = value.substring(0, 10) + '<span class="red">' + value.substring(10) + '</span>'
});
You can find a working fiddle here https://jsfiddle.net/v127c14p/
in html you can't define sub elements in the value of input fields because it is allways a simple string and not a html element. so you only can define the color for the input element and the complete text.
<input type="text" value="my <em style='color: red;'>test</em>"> is not possible
<input type="text" value="my test" style="color: red;"> is the only way to mark the text
what can be a sollution, define a simple div tag, write the value of your input filed inside that, and mark the text in that div tag by surrounding with a span tag and setting a class to this
Edit:
best practice is, simply show a red border on the input field and tell the user with a popup what exactly is wrong with his input (bootstrap modals or jquery-confirm.js for excample)
Note: If I explicitly need an <input> field and not just user-editable text, this solution won't work!
It is a quite old question, but maybe someone finds this solution helpful.
It uses the contenteditable tag, to allow the user to type / change text in an normal HTML element and JS to check and color the text.
The field check can, for example, also be done with "onkeyup" for immediate feedback to the user, but this will also reset the text cursor to the beginning of the field.
HTML:
<a id="sample_id" onblur="color_overlength_func('sample_id', 20)" contenteditable="true">Some Text</a>
JS:
function color_overlength_func(textfield_id, max_length) {
let text_temp = document.getElementById(textfield_id).innerHTML;
if (text_temp.length >= max_length) {
let text_OK = text_temp.substr(0, max_length);
let text_to_long = text_temp.substr(max_length);
document.getElementById(textfield_id).innerHTML = "" + text_OK + "<em style='color:red;'>" + text_to_long + "</em>";
}
}
You can find a working fiddle here: https://jsfiddle.net/kyh9803c/
You can do a substring and append a element like span and then target the span with css or js directly.
You can use CSS. Although javascript library need to load everytime
you mean something like this
<div>
HELL<span class="red" style="color:red">O</span>
</div>
I have an HTML page with two buttons: a light theme button and a dark theme button. When I click the light theme button the background will turn light gray and text is black, when I click the dark theme button the background will turn black and text is white.
When I reopen my page the last theme selected should be generated.
so here is my html:
<html>
<head>
<script type="text/javascript" src="js/index.js"></script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<div class="MyPage">
<body>
<h1>choose a theme:</h1>
<input id="b1" type="button" value="light theme">
<input id="b2" type="button" value="darck theme">
<p>this a sample for using API local storage in HTML5 </p>
</body>
</div>
</html>
css:
.MyLightPage
{
background-color: gray;
text-decoration-color: black;
}
.MyDarkPage
{
background-color: black;
color: white;
}
My problem is how to connect the 3 diverse types of my project (HTML, CSS and JavaScript) and what functions should be existing in my JavaScript file to make this happen.
This can be easily done using JavaScript.
The buttons call different functions where the background and text color is being set.
#MyPage {
background-color: black;
color: white;
}
<div id="MyPage">
<h1>choose a theme:</h1>
<input id="b1" onclick="lightTheme()" type="button" value="light theme">
<input id="b2" onclick="darkTheme()" type="button" value="dark theme">
<p>this a sample for using API local storage in HTML5 </p>
<script>
function darkTheme() {
document.getElementById('MyPage').style.backgroundColor = "black";
document.getElementById('MyPage').style.color = "white";
}
function lightTheme() {
document.getElementById('MyPage').style.backgroundColor = "white";
document.getElementById('MyPage').style.color = "black";
}
</script>
</div>
This snippet shows how to set the relevant CSS classes upon the click of a button. Saving the selecting theme can be added to the JS part easily - please refer to the very simple Localstorage API for details.
$('#b1').click(function() {
$('body').attr("class","MyLightPage");
});
$('#b2').click(function() {
$('body').attr("class","MyDarkPage");
});
.MyLightPage
{
background-color: gray;
text-decoration-color: black;
}
.MyDarkPage
{
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="MyPage">
<h1>choose a theme:</h1>
<input id="b1" type="button" value="light theme">
<input id="b2" type="button" value="dark theme">
<p>this a sample for using API local storage in HTML5 </p>
</div>
</body>
As a side note, please also have a look at how a basic HTML document is structured. The body tag should not be the child of any divs, it has to be the direct child of the html tag.
If you want to maintain the state of the last color that is clicked you need to hold some data on the server. The DOM will refresh every time you do a hard page reload. Database data, however, maintains the data that you can fetch on every page load. You can update this database data when one of the buttons is clicked. You have different ways to implement this. An example could be:
.theme-styling{
<?php echo getDarkOrLightThemeCode(); ?>
}
Then in the DOM, you can assign theme styling to specific elements that have a light and dark element styling:
<button class="btn btn-large theme-styling">Hello</button>
<button class="btn btn-large theme-styling">Goodbye</button>
You can add an id to specific elements if you want additional styling apart from your dark and light theme styles.
And then specifically, when the user clicks a dark theme button or light theme button, you should create an AJAX request to update the variable property on the server.
try this:
var element = document.querySelector('body'),
button = document.querySelector('#myButton');
button.addEventListener('click',function(){
if(element.className == 'MyLightPage'){
element.className = 'MyDarkPage';
}else{
element.className = 'MyLightPage';
}
});
I want to pop up an alert when a user clicks on a BBcode icon in editor.
for example, I have a Spoiler BBcode and I want the event below for it :
onClick=alert("// Something Here")>
Where should I add this event ?! where are the codes for a BBcode which exists in editor ?
More explanation about the thing I need:
I have a Spoiler which makes tag.
I want to add an option for it like .
"sth" is the string which users insert in a text input which has been alerted after they click on the BBcode icon in Editor. Then, the content will hide or show by clicking on "Sth"
This is my Spoiler code :
<div style="background-color: #fff; font-size: 1em;">
<div style="text-transform: uppercase;text-decoration:underline; font-size: 0.8em; font-weight: bold; display: block;">
<span onClick=" if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<a href=\'#\' onClick=\'return false;\'>Hide</a>'; }
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<a href=\'#\' onClick=\'return false;\'>Show</a>'; }" />
Show</span></div><div class="quotecontent">
<div style="display: none;">{param}</div>
</div>
</div>
I think you mean this :
/clientscript/ckeplugins/bbcode/plugin.js
The Editor in VB vary widely from the original standalone one.
thus , it seems hard to work with it.
So the labels are populated from the database. Once the label is clicked, the label need to turn red and bold. when clicked on another label, the first label need to come back to original state and the new label should be activated and it needs to be bold and red. for some reason, the changeActiveStates() only works for the first 2 labels, i.e., when first label is clicked it turns red and when the second label is clicked the first label is turned black and the second label is turned red. when the third label is clicked, the second label remains red and the third one turns red. How do i fix this??
Here is the code:
<html>
<span>
<input type="hidden" name="LiabFilter" id= "idLib<%=liabkey %>" value="<%=liabkey %>" />
<div>
<label for="idLib<%=liabkey%>" id="liablabel" style="cursor: hand; padding-left: 25px; font-weight: normal"
onClick ="clearLiabFilter();
document.getElementById('idLib<%=liabkey%>').checked = true;
changeActiveStates(this);">
<%=liab.getName() %>
</br>
</label>
</div>
</span>
<style type="text/css">
.activate { font-weight: bold; color:#e40000;}
.visited{ font-weight: normal; color: #000000;}
</style>
<script>
function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = '';
ele.className = 'activate';
prevLink = ele.id;
}
</script>
</html>
Are you averse to JQuery?
If not, this should work.
$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});
EDIT: Example on jsFiddle
EDIT: A little more detail as the questioner hasn't used JQuery before.
JQuery is a javscript library and so must be loaded by the browser before you can do all the nifty stuff.
Add the following between the <head></head> tags on your page:
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
(Why let google host JQuery for you?)
Then add the following, also between the tags but after the script tag given above:
$(document).ready(function() {
$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});
});
(What does $(document).ready() do?)
Maybe not the best of solutions, but have you considered using jQuery? It's generally not too much of a dependency , and will solve these sort of issues quite elegantly and easily for you. Plus. Cross-browser compatibility.
I have a div that contains the value of the textarea on keyup, so as i type in the textarea, it's shown in the div, the div is a comment preview for the textarea. is it possible to emulate a click in the textarea when i click in the div? so if in the div i click on the word 'world' in the sentence 'hello world i am on you', then it would emulate the click on the same word at the same point in the textarea?
is there a way to do this with jquery?
" emulate the click on the same word at the same point in the textarea "
I guess its difficult to capture the exact position of the text in textarea, but you can do some thing below ( though it doesn't met your requirement ) . please Try to understand.
I feel this is difficult 'cause, just clicking on some text in a <div /> tag doesn't give the offset position of the Word. If you're going to select some text in div, may be this post helps.
But I'd like to learn if it is possible using just a .click()
If some one comes up with a cool thought, it would be more helpful =)
HTML :
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Avinash</title>
<style>
#input , #output { margin: 20px;width:300px;height:200px; border:1px solid #000; font 15px Arial; }
#output {overflow:scroll;float:left; font:bold 14px verdana; color : #0099b9; }
</style>
</head>
<body>
<table>
<tr>
<td>
<textarea id="input" >Type your Text </textarea>
</td>
<td>
<div id="output" > </div>
</td>
</tr>
</table>
</span>
</body>
</html>
JavaScript :
$(function() {
$('#input').one('focus',function() {
$(this).val('');
}).bind('keyup',function() {
$('#output').text($(this).val());
});
$('#output').bind('click',function() {
alert('focusing Textarea');
$('#input').focus();
});
});
you can Test the above Code here : http://jsbin.com/atuqo4