Javascript: add a text into text area - javascript

I would like to load a text into text area, when clicked in a map area.
When I click in the second area, I would like to add another (different) text
How can I make this happen?
http://jsfiddle.net/CQvKJ/

I don't know Mootools, so I did this in JS only without framework.
This may not be a good solution, but this is basically what you want to do, no matter how you append the text.
Sample
http://jsfiddle.net/CQvKJ/2/
Updated JS
function funzione1() {
// alert("add text : 1.");
var e = document.getElementById('my_text');
e.value += "1";
}
function funzione2() {
// alert("add text: 2");
var e = document.getElementById('my_text');
e.value += "2";
}

Identify the <textarea> by id.
Retrieve the element in the click handlers.
Set the element's value to the text you want to show up.
Forked fiddle.

Related

Jquery set cursor at the end of the text in contenteditable

I am working on my jquery script to remove the link by replace the text when I click on a button. I have got a problem with the cursor at the end of the text because it will move the cursor at the start of the text, example: when I click next to 2!, it will move the cursor at the start before the Video Here 1 when I try this:
selected_text = window.getSelection().getRangeAt(0).endContainer.wholeText;
$('#text_editor').html($('#text_editor').html().replace('Video Here 2!', selected_text));
$('#text_editor').focus().val(selected_text);
Here is my code: https://jsfiddle.net/su9dktrz/
What I want to achieve is when I click on the text "Video Here 1!", "Video Here 2!", "Video Here 3!" or whatever it is and when I click on a button to remove the hyperlink to replace it with a text, I want to move the cusor next to the text 2! or whatever it is.
Can you please show me example how I can move the cursor next to the text 1!, 2!, 3! or whatever it is in the contenteditable?
I have tried to find the answer on google but I couldn't find it.
Thank you.
You may need to clean this up for your browsers, I tested in FireFox.
Working Example: https://jsfiddle.net/Twisty/ksd1gwp9/22/
JavaScript
$(function() {
function unlink(link) {
var txt = link.text();
var sp = $("<span>").html(txt);
link.replaceWith(sp);
}
function getObjectFromCursor() {
var obj, sel = window.getSelection() ? window.getSelection() : document.selection;
var range = sel.getRangeAt(0);
obj = $(range.startContainer.parentElement);
console.log(obj, range);
return obj;
}
$("#toolbar").on("click", "#toolbar_unlink", function() {
var target = getObjectFromCursor();
if (target.prop("nodeName") == "A") {
unlink(target);
}
})
});
The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.
The range has nodes, for start and end of the selection, and these have references to parent elements. This is helpful for us to find the specific element the cursor is in or at. We can then target this element and replace it with plain text based on the content of the link.

Laying a text over another text in response to a button

So I am trying to figure this out and I'm quite lost. This is what I would like my program to do.
TEXT1
button
When I press the button, I would like this to happen:
TEXT2
button
When I press the button again, I would like:
TEXT3
button
And for the last text, I would like the button to disappear:
TEXT4
So I'm not really giving the user an option to go back and read the previous texts if she already clicked the button to read the next text.
Now, this is the closest to my getting to producing this effect. I would assign a class to all my TEXTs. Let's call it Texts. And I will give my button a class. Let's call it readMore. And to readMore I will call, click(function({})). So when I click the button, I would call fadeOut() to (this), which is the current text, TEXT1. And then call fadeIn() to (next), which is TEXT2. But then problem with this is that (This) will always refer to TEXT1 and (next) will always refer to TEXT2. So that is my problem. Any possible solutions?
This is my code that I came up with:
$(document).ready(function(){
$('.readMore').click(function(){
$('.texts').(this).fadeOut("fast");
$(this).next().fadeIn("fast");
});
});
You can use position absolute for texts blocks, but you need fixed height container for it. Also you can make a text container for showing, and hide all texts in blocks with display: none; and replace html from it to visible container
Your logic seems correct. You have a click event on the button and every time you click it you change the text. You can change the text by changing the innerHTML of the $('.texts') element.
Also in order to have the different text numbers 1, 2, 3 etc you can add a global variable var globalCounter = 0; and increase the globalCounter by 1.
So something like the code below should work:
$(document).ready(function(){
var globalCounter = 0;
$('.readMore').click(function(){
globalCounter++;
$('.texts')[0].innerHTML = "Text "+ globalCounter;
});
});
Also if you want the button to disappear when Text 4 is shown you can add a simple if statement which checks the globalCounter variable. When it is 4 you can set the button's display property to none
Here's the code:
var MAX_CLICK_COUNT = 4;
var currentCount = 1;
function updateLabel(){
$("h3").html("TEXT "+ ++currentCount);
if(currentCount == MAX_CLICK_COUNT) $("button").hide();
}
And, here's the fiddle!
Update:
var MAX_CLICK_COUNT = 4;
var currentCount = 0;
var content = ["Paragraph text 1", "Paragraph text 2", "Paragraph text 3", "paragraph text 4"];
function updateLabel(){
$("h3").html(content[currentCount++]);
if(currentCount == MAX_CLICK_COUNT) $("button").hide();
}
And here's the updated fiddle!

Simplest way to filter text copied from a web page using JavaScript

I have a web page where the text has ­ characters (= soft hyphens) and other unusual entities mixed in. While these entities are necessary for correct display of the page, I would like to filter them out of text copied from the page to the clipboard.
1) Is this possible with JavaScript? I’m familiar with the onCopy event, but the examples I’ve seen don’t make the copied text available for further processing.
2) If so, what is the simplest way to accomplish it?
What I can’t do:
a) Change the characters in the web page at the server side.
b) Install JQuery or another JS framework just for this one function.
For a while, I thought that it was impossible to do it with JS only, but you can! You need to use the oncopy event handler, and change the selection to a temporary div containing the filtered text.
Here is an example:
function copyHandler() {
//Get the selected text
var selection = window.getSelection(),
// Filter it
newText = filterText( selection ),
// Create a div
newdiv = document.createElement('div');
// Hide it
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
// Insert the div in the body
document.body.appendChild(newdiv);
// Put the text in it
newdiv.innerHTML = newText;
// Select what's in the div
selection.selectAllChildren(newdiv);
// When the copy is over, remove the temporary div
window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
}
document.addEventListener('copy', copyHandler);
function filterText(txt){
/* Do whatever you want here */
/* To show that it's working, I'll just return that string every time */
return 'I\'m a filtered String!';
}
JS Fiddle Demo
Try copy / pasting text in the Fiddle.

TinyMce editor not returning tags

H7i guys, I am having a weird problem with the TinyMce editor. What I am trying to do is to select some text, click a button and append a tag at the start and at the end.
For example, if the original text is <p>hello</p>, the end text would be <myTag><p>hello</p></myTag>.
It works fine but when selecting a single line of text the existing tags are not returned. So in the previous example I would get hello only and not <p>hello</p>.
When I select multiple lines it returns the tags.
Here is what I have tried so far:
var se = ed.selection.getContent(); //Doesn't return tags on single line
var be = ed.selection.getNode().outerHtml; //Doesn't work with multiline
var ke = ed.selection.getContent({ format: 'raw' }); //Same as the first option
Any help?
You will need to employ different functions to get the content, depending on the content the user selected
var node = ed.selection.getNode();
if (node.nodeName != 'P' )
{
content = ed.selection.getContent();
}
else content = node.outerHtml;
I use this, and works well:
var textt= tinyMCE.activeEditor.selection.getContent({format : 'text'});
alert(textt);
BUT NOTE: You should not select text from the start of a paragraph to the end of a paragraph,
because in that case(maybe bug of TinyMce), it cant get content .

How do you 'replace' numbers with 'x's' in jQuery with one button?

Does anyone know how to do replace multiple text by clicking a button with jQuery?
I've built a website that displays some text/data eg; "£100.00", but I what I need is to be able to 'replace' those monetary values with "£XXX.XX" with a 'Hide' button like you get on some banking websites. For example one web page has:
£100.00, £200.00, £130.00 etc etc..
...so when a user presses the Hide button, all of the numbers on the page turn to £XXX.XX. Ideally, the button should then display "Show" instead of "Hide" and switch back when toggled.
This is for a static dummy site, so no data base.
I suspect this is best handled with jQuery?
Thanks for your time,
D.
Case 1: Controlled Input
Assuming you can at least wrap all monetary values with something like this:
<span class="money-value">£200.00</span>
<span class="money-value">£300.50</span>
And that you can add button declared with:
<button id="secret-button">hide</button>
Then you could have some jQuery code doing this:
/**
* Simple search and replace version.
*/
$(function() {
$("#secret-button").click(function() {
$(".money-value").html($(".money-value").html().replace(/[0-9]/g,"X"));
});
});​
or a more advanced one with:
/**
* Complet version.
*
* 1) on button click, if asking to hide:
* 1.1) iterate over all entries, save their text, and replace it with markers
* 1.2) toggle the button's text to "show"
* 2) on button click, if asking to show:
* 2.1) iterate over all entries, restore previous text
* 2.2) clear the hidden store
* 2.3) toggle the button's text to "hide"
*/
$(function() {
var hiddenStore = [];
$("#secret-button").click(function() {
if ($(this).html() == "hide") {
$(".money-value").each(function () {
var text = $(this).html();
hiddenStore.push(text);
$(this).html(text.replace(/[0-9]/g,"X"));
});
$(this).html("show");
} else {
$(".money-value").each(function (i) {
var text = hiddenStore[i];
$(this).html(text);
});
hiddenStore = [];
$(this).html("hide");
}
});
});​
Complete solution is here: See here: http://jsfiddle.net/u79FV/
Notes:
this won't work for input field values
this assumes your text entries have been marked as shown above
Does what you want with the button's changing state.
Saves the values and puts them back.
Meant to work even if new fields are added dynamically.
Shankar Sangoli's answer uses a different way of saving the stored data, which you could as well consider (using the jQuery .data() method).
you may want to switch the button to an <input type="button" /> tag, in which case you'd use .val() instead of .html() to toggle its text.
Case 2: Uncontrolled Input
Assuming you don't have control over where the values may show up, then you need to do something a bit more complicated, which is to look in the whole page for something that would look like a currency format. I'd advise against it.
But, the jQuery Highlight plugin could be something to look at, as its code does something similar (in that it searches for pieces of code to modify), and you could then reuse some of solution 1 to make it fit your purpose.
That would be harder to design in a fool-proof fashion though.
You could use a regular expression:
var expression = /\d{1}/g;
var newString = myString.replace(expression,"X");
Then just dump newString into whatever control you need it to appear in.
Edit:
A jQuery idea for something like this would be to give all of the controls that have these numbers a common class identifier to make them easy to grab with the selector:
$(".numbers").each(function() {
$(this).text($(this).text().replace(/\d{1}/g, "X"));
}
... more readable ...
$(".numbers").each(function() {
var text = $(this).text();
var newText = text.replace(/\d{1}/g, "X");
$(this).text(newText);
}
If your markup is something like this you can try this.
<span>£1000.00</span><span class="showhide">Hide</span>
JS
$('.showhide').click(function(){
var $this = $(this);
var $prev = $this.prev();
if(!$prev.data('originalvalue')){
$prev.data('originalvalue', $prev.text());
}
if($this.text() == 'Hide'){
$this.prev().text($prev.data('originalvalue').replace(/\d{1}/g,"X"));
$this.text('Show');
}
else{
$prev.text($prev.data('originalvalue'));
$this.text('Hide');
}
});
In the above code I am basically storing the original value using jQuery data method within the span element itself which is used to display the actual value.
Once you click on Hide, get the previous span using prev() method and set its text with original value replacing all the numbers in it by X. Then change the link text from Hide to Show.
Next when you click on Show get the previous span using prev() method and set its text with the original value and change the link text from Show to Hide.
References: .prev(), .data()
$('#yourButton').click(function(){
var saveText = $('body').text();
$(this).data('oldText', saveText);
if ($(this).text() == "Hide"){
$('body').text($('body').text().replace(/\d{1}/, "X"));
$(this).text('Show');
}
else{
$('body').text($(this).data('oldText'));
$(this).text('Hide');
}
});
This is kind of a complicated problem actually. You will need to be able to save the state of the text when its in number form so you will be able to toggle back and forth. The above code is untested but hopefully it will give you an idea what you need to do.
function toggleMoney() {
$('.money').each(function() {
var $$ = $(this), t = $$.text();
$$.text($$.data('t') || t.replace(/\d/g, 'X')).data('t', t);
});
$('#toggleButton').text($('.money').text().match(/\d/) ? 'hide' : 'show');
}
http://jsfiddle.net/DF88B/2/

Categories