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();
});
Related
I have a problem with javascript search and highlight text.
For example, there is existing span element and existing div element.
Problem is that if I click on search button for some reason div element becomes a child of span element.
To explain it better I have created JS fiddle to show the problem:
function highlightSearch() {
$('span').removeClass('highlighted');
var text = document.getElementById('query').value;
var query = new RegExp("(\\b" + text + "\\b(?!([^<]+)?>))", "gim");
var e = document.getElementById("searchText").innerHTML;
var enew = e.replace(/(<span class='highlighted'>|<\/span>)/igm, "");
document.getElementById("searchText").innerHTML = enew;
var newe = enew.replace(query, "<span class='highlighted'>$1</span>");
document.getElementById("searchText").innerHTML = newe;
}
Check problem on : JSfiddle
Well, you are removing all </span> tags from the innerHTML in this line:
var enew = e.replace(/(<span class='highlighted'>|<\/span>)/igm, "");
And therefore also the </span> of .glyphicon. This is why the element becomes wrapped.
Btw: An exception is thrown: ReferenceError: highlightSearch is not defined
I'm using javascript and jQuery to design a comment box.
My page has a textarea and 3 buttons (bold, underline and italic). If a user types text in the textarea, selects and clicks any button, the selected text should become bold, underlined or italicised (I have this functionality below).
My problem is that after clicking a button with text selected, although the html tags are correctly inserted, the selection is lost. That is, when I type: "Hello, I'm here.", select "I'm here" and click the bold button. I'm here becomes bold but if I want to also underline or italicise, I have to reselect the text.
So, my question is: How do I re-select the selected text in the textarea?
I tried myTextarea.select() but this code will select the entire contents of the textarea, not only the selected text.
Update:
Here is what I've got so far:
var mystring = ""; // default string
/* Bold event */
function Bold()
{
var startString;
var endString;
var startPos; // starting position
var endPos; // ending position
var selectedText;
var temp = document.getElementById("myTextarea");
// check if text is selected
if(temp.selectionStart !== undefined)
{
startPos = temp.selectionStart;
endPos = temp.selectionEnd;
selectedText = temp.value.substring(startPos, endPos);
startString = temp.value.substring(0, startPos);
endString = temp.value.substring(endPos, temp.value.length);
}
$("#myTextarea").val(startString + "[B]" + selectedText + "[/B]" + endString); // rewrite textarea value
if(mystring !== "") // check if default string is NOT null, return null if it's the first clicked
{
mystring = mystring.replace(selectedText, "<b>" + selectedText + "</b>");
}
else
{
mystring = startString + "<b>" + selectedText + "</b>" + endString;
}
// write to preview panel
$("#preview").html(mystring);
$("#myTextarea").focus();
}
When I select "I'm here" in the textarea and click the bold button the code above will insert [B] and [/B] into the textarea and <b> tags into the preview panel.
To reselect the text you can do:
temp.setSelectionRange(startPos, endPos + 6);
I've added + 6 because you're inserting 6 new characters so I'm expanding the selection to include them. You could also add 3 to startPos and endPos (and let the characters wrap the selection) - IMO this is inferior UX wise.
I have a textbox which a user can type in, and below is a list of tags which can be clicked.
When a user clicks a tag, it is entered in the textbox and the tag is highlighted by changing the class. When a user clicks the same tag again, it deletes the tag from the textbox and removes the class from the tag so it is back to its original, non-highlighted state.
This creates a problem where if the user deletes the tag them themselves, it still stays highlighted in our collection of tags at the bottom. Is there any way to check whether specific text has been deleted from the textbox so we can remove the class from the tag? I was thinking some jQuery but I don't know where to start
The code for the box and tags is :
<div class="container">
<textarea id="ReplyBox" placeholder="Give some more information..." class='message-content-box'></textarea>
</div>
<div class="container">
<div class="tags">
#tag1
#tag2
#tag3
</div>
<button id="Send">Send</button>
</div>
And the current jQuery is :
$(document).on("click","mytag", function(event){
event.preventDefault();
var text_box = $('.message-content-box');
var space = ' '
if(text_box.val().length == 0) {
space = ''
}
var hashtag = $(this).text()
//If already selected
if ($(this).hasClass("selected-mytag")){
//Remove Selected class
$(this).removeClass("selected-mytag");
//Removes hashtag from text box
text_box.val(text_box.val().replace(hashtag, ""));
} else { //If not selected
//Add selected class
$(this).addClass("selected-mytag");
//Add hashtag to text box
text_box.val(text_box.val() + space + $(this).text());
}
});
this code worked for me:
$('.mytag').on("click", function(event){
event.preventDefault();
var text_box = $('#ReplyBox');
var space = ' ';
if(text_box.val().length == 0) {
space = '';
}
var hashtag = $(this).text();
//If already selected
if ($(this).hasClass("selected-sticky-hashtag")){
//Remove Selected class
$(this).removeClass("selected-sticky-hashtag");
//Removes hashtag from text box
text_box.val(text_box.val().replace(hashtag, ""));
} else { //If not selected
//Add selected class
$(this).addClass("selected-sticky-hashtag");
//Add hashtag to text box
text_box.val(text_box.val() + space + $(this).text());
}
});
$('#ReplyBox').on('keypress paste textInput input', function(){
$('.selected-sticky-hashtag').each(function(){
if($('#ReplyBox').val().indexOf($(this).text()) == -1)
$(this).removeClass("selected-sticky-hashtag");
});
});
What I am doing here, is to check on every change of the input value, if all active Tags are actually contained in the inputs value. I adjusted some of the selectors, because the code you provided didn't actually work.
Something like
$( "textarea:contains(hashtag)").hasClass("selected-mytag"));
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
How can I add custom text to already written text in textarea using javascript??Thanks...
function addText(elId,text) {
document.getElementById(elId).value += text;
}
or:
function addText(elId,text) {
var obj = document.getElementById(elId);
var txt = document.createTextNode(text);
obj.appendChild(txt);
}
myTextarea.value += "text to add to the textarea"
Grab the existing text in the textarea (the element's .value)
Combine your existing text (append, prepend, insert, or whatever you need)
Write the result back to the textarea.
Tah-dah!