I have got a button 'edit description' when I click on it text disappear and appear
if (id == 'commedit') jQuery(this).html('<textarea>'+jQuery(this).text()+'</textarea>');
else if (id == 'commsave') {
jQuery(this).text(jQuery(this).find('textarea').val());
}
In MySql I have this text - "tetee<br>afafaf<br>afafaf<br>afsafsasfasf" in view it dispays with line breaks but when I click 'edit' in text area which come with Jquery text appear without lines and when I click save it also appear in my description field in one long line without line breaks. So I need your help
<br> are html breaks. You want \n in a textarea.
jQuery(this).html().replace(/<br>/gi,"\n")
When you save, you want to change it back to breaks and use html() instead of text();
var elem = jQuery(this);
if (id === 'commedit') {
var text = jQuery(this).html().replace(/<br>/gi,"\n");
elem.html('<textarea>'+ text +'</textarea>');
} else if (id === 'commsave') {
var html = elem.find('textarea').val().replace(/\n/g,"<br>");
elem.html(html);
}
JSFiddle Example
Related
I am really struggling with this.
I have two div on a page. The first one has got contents (mainly text). On the second div, I want to display the content of first div based on the position. for example if i select line 30, then the content of that line will be displayed in second div. Is there any idea to do that?
Thank you
This answer assumes you only want to copy the selected text to the new div and provices a basic idea how you can do so
In order to achieve that kind of behaviour you need to listen to the mouseup event in your container where you want text to be selected. That way we assume, that the user was selecting something and ended the selection.
I have prepared this JS fiddle for you: https://jsfiddle.net/djzkcw0m/
Code for the prove of concept:
HTML
Highlight some text with mouse in this container:
<div id="test">
This is some text and you can highlight it with your mouse
</div>
Result div:
<div id="result"></div>
JS
const testDiv = document.getElementById('test');
const resultDiv = document.getElementById('result');
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
testDiv.addEventListener('mouseup', function(e) {
const selectedText = getSelectionText();
resultDiv.textContent = selectedText;
})
note
Method "getSelectionText()" is found from a related question Get the Highlighted/Selected text
I am trying to make a content editable div that can be used to generate message templates for an app. Users can append placeholders for fields like names to a template by hitting a button. The placeholders can be removed by hitting an 'x' on them as well. Here's the working snippet.
var removePlaceholder = function(e){
e.parentNode.parentNode.removeChild(e.parentNode);
}
var appendPlaceHolder = function(field){
var e = document.getElementById("t");
e.innerHTML += ('<span class="tag">{'+field+'}<span onclick=removePlaceholder(this) class="remove">x</span></span>')
}
.tag {
background-color : blue;
color : white;
}
.remove {
color : red
}
<div id="t" contenteditable="true">Hello</div>
<button onclick=appendPlaceHolder("first_name")>Add first name</button>
The contenteditable part works just fine. But after I've added a placeholder using my appendPlaceHolder function, everything I type seem to get appended to the last inserted HTML element.
How can I prevent this. I have closed the tag properly. Is there any way to change this behaviour.
To recreate issue, run the snippet and hit the "Add First Name" Button, then continue typing in the area.
Update
Have added image to explain the situation
What you can do is add a space after the placeholder has been appended:
JavaScript
var removePlaceholder = function(e){
e.parentNode.parentNode.removeChild(e.parentNode);
}
var appendPlaceHolder = function(field){
var e = document.getElementById("t");
e.innerHTML += ('<span class="tag">{'+field+'}<span onclick=removePlaceholder(this) class="remove">x</span></span> ')
}
Note: The which has been added at the end of the span just creates a space.
Live Example
JSFiddle
What I want - A button that (onclick) adds the selected text to a textbox (with the name of "body"). I would like it to be prefixed with a linebreak and greater than sign, and at the end two linebreaks/a paragraph.
My current code:
function
addtext() {
var newtext = '\uA' '\u3E' document.getSelection() '\uA';
this.email.comments.value += newtext;
location.href="#emailme"}
Basically, after selecting text and clicking the button, add the selected text to the form with a few changes. What actually happens is absolutely nothing.
Notes: NO JQUERY. JQuery answers will be ignored. Pure JS only.
try this
var textBox = document.getElementById("text-box"); // replace the id by your text box identifier
var addTextButton = document.getElementById("add-text-button"); // replace the id by your button identifier
function addText() {
// \u000a is escape sequence for line feed
var newText = '\u000a>' + document.getSelection().anchorNode.textContent + '\u000a\u000a';
// add any extra data to new text here like newText += extraData
textBox.value += newText;
}
addTextButton.addEventListener("click", function(event) {
event.preventDefault();
addText();
});
I want to be able to identify if selected text contains a URL - the idea is that once a user selects text within a content editable div if it contains a URL - the URL is displayed in another content editable div to allow them to make corrections to the URL. Then if they make changes to the URL it then updates the <a href>.
I have currently created the code to allow the users to select any text and create a link its just the amendments thats causing the problem.
The code below is a section of my code where when the user selects an element of text it assigns # as the URL then they can write a http:// link into a content editable div called #link once the user has entered a http:// link it then updates # with the link.
document.getElementById("insertHTML").onclick = function(e) {
var sText =document.getSelection();
document.execCommand('insertHTML', false, '' + sText + '');
};
var contents = $('#link').html();
$('#link').blur(function() {
if (contents!=$(this).html()){
contents = $(this).html();
document.getElementById('data_link').setAttribute('href', contents);
document.getElementById('data_link').setAttribute('id', contents);
}
$('#link').empty();
});
any ideas would be great had no luck with anything online so far
Thanks Everyone :)
Jsfiddle
Select some text, you'll see it appears in the alert. You can uncomment the line with the url, make it your own url and place the text wherever you want it, I simply placed it where I did as an example of how you would implement this. When the text is selected, it will bring you to that url.
If you want to create an input type="button" id="myInputButtonId" etc to link to another page, then use
$("#myInputButtonId").on('click', function(){
instead of
$("#writtenstuff").on('mouseup', function () {
HTML
<div id="writtenstuff">
<p>The quick brown fox jumps over the lazy dog</p>
</div>
JS
$("#writtenstuff").on('mouseup', function () {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
if (text != "" && text != " ") {
alert(text);
//window.location.href = "http://www.someurl.com/"+text;
}
});
I'm trying to make it so that the text inside a text area can be toggled to be bold or not, by pressing a button. I have the following code:
function bold()
{
var ta = document.getElementById("textArea");
if(ta.style.fontWeight == "normal"){
ta.style.fontWeight = "bold";
}
else{
ta.style.fontWeight = "normal";
}
}
When the I press the button, nothing happens the first time. But I press it a second time and it runs perfectly. Running it through a debugger, the variable "ta" becomes equal to "" the first time, and then "normal" the second time, despite the text area being set to normal in the css.
Any ideas?
Thanks
So the reason this is happening is because ta.style is accessing the style attribute of the textarea element, which will not have any information about styles coming from CSS. You could write your textarea like this, and it should work with what you have:
<textarea id="textArea" style="font-weight:normal"></textarea>
But, I'd recommend you do something along these lines in your js:
function bold()
{
var ta = document.getElementById("textArea");
if(ta.style.fontWeight !== "bold"){
ta.style.fontWeight = "bold";
}
else{
ta.style.fontWeight = "normal";
}
}
Might also be helpful to rename your function to toggleBold ;)
Instead of trying to fight it, just change your condition:
if (ta.style.fontWeight == "normal" || ta.style.fontWeight === '') {