Managed to get highlighted text from within a textarea and transfer it into another textarea. But when the code is edited so that it gets the highlighted text from within a div instead, it does not work...
Any ideas why this is happening? Thanks.
<div id="quote"> load transcript in here instead and grab text from here</div> // does not work
<textarea id="quote" readonly> // works
load transcript in here
</textarea>
<textarea contenteditable="false" id="output" name="selected"></textarea> // outputs highlighted text here
<script>
var quotearea = document.getElementById('quote')
var output = document.getElementById('output')
quotearea.addEventListener('mouseup', function(){
if (this.selectionStart != this.selectionEnd){ // check the user has selected some text inside field
var selectedtext = this.value.substring(this.selectionStart, this.selectionEnd)
output.innerHTML = selectedtext
}
}, false)
</script>
fiddle:
https://jsfiddle.net/Lzgyh2kd/
I answered your question in the comments and deleted it.
You're using selectionStart and selectionEnd methods that works only on input elements. For your solution used instead document.selection.createRange().text that gets the selected text in the document (inputs, divs, etc., doesn't matter).
Here's the fiddle:
Working demo
Someone in the comments answered it with a fiddle that had two textarea, but edited one to a div and it seems to work. Cheers. (Edit- turns out a div was not required, it took straight from the page, so a workaround)
<div name="" id="original">
Load transcript in here.
</div>
<textarea name="" id="copied" cols="30" rows="10"></textarea>
<script>
var text = '';
function copyText(e) {
text = (document.all) ? document.selection.createRange().text : document.getSelection();
document.getElementById('copied').value = text;
}
document.onmouseup = copyText;
if (!document.all) {
document.captureEvents(Event.MOUSEUP);
}
</script>
Working fiddle here:
https://jsfiddle.net/eLwy4eLp/1/
Related
Passing the data from a data box input into a static logger on the left so basically what you type on the right is outputted on the left in its own little box? I need some js php help?
<div class="div-left">
text logged input
</>
<div class="div-right">
text box input
</>
You need to attach event listener to input and update the target element as you type.
For example:
var left = document.getElementById('left');
var p = document.querySelector('.box p');
left.addEventListener('input', function(){
p.innerText = left.value;
})
Example codepen link
You can't type directly into a div. You can type into an input tag and remove the border. To get the text to change as you type use onkeyup as oppose to an event listener
function myFunction(){
text = document.getElementById("input").value;
document.getElementById("div-right").innerHTML = text;
}
//input {border:0;outline:0;}
//input:focus {outline:none!important;}
<div id="div-left" style="width:40%;float:left;margin-left:50px">
<input id = "input" onkeyup="myFunction()"\>
</div>
<div id="div-right" style="float:right;margin-right:50px;width:40%">
text box input
</div>
It's simple with jQuery.
$('textarea').click(function(){$(this).select();});
$('textarea').keyup(function(){
$('div').text($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<textarea style="float:left;">Please type here</textarea>
<div style="white-space:pre;float:left; margin-left:30px;"></div>
On my Ionic App I have a Textarea where the user can select a text and with button [BOLD]
add [b] [/b] around the selection.
How can I apply BOLD formating, replacing the [b] [/b] on the output text?
Thats my code. And here's the JsFiddle
<textarea id="TheTextInput" rows="5"></textarea>
<input type="button" id="TheButton" value="click" />
<input type="button" id="bold" value="BOLD" />
<pre id="TheOutput"></pre>
$(document).ready(function () {
$('#TheButton').click(PutTextIntoDiv);
});
function PutTextIntoDiv() {
var TheText = encodeURIComponent($('#TheTextInput').val());
$('#TheOutput').text(decodeURIComponent(TheText));
}
$( "#bold" ).click(function() {
var textArea = document.getElementById("TheTextInput");
if (typeof(textArea.selectionStart) != "undefined") {
var begin = textArea.value.substr(0, textArea.selectionStart);
var selection = textArea.value.substr(textArea.selectionStart, textArea.selectionEnd - textArea.selectionStart);
var end = textArea.value.substr(textArea.selectionEnd);
textArea.value = begin + '[b]' + selection + '[/b]' + end;
}
});
Thanks for your help!!
*Its not duplicate from Is it possible to display bold and non-bold text in a textarea?
Cause I don't want format the text inside the textarea, but the OUTPUT text.
Consider PutTextIntoDiv() replacing with:
function PutTextIntoDiv() {
$('#TheOutput').html($('#TheTextInput').val().replace(/\[b\]/g, '<b>').replace(/\[\/b\]/g, '</b>'));
}
The <pre> in your JSFiddle should render <b> fine.
You can do a RegEx replace to convert the "BBCode" tags into html tags using .replace(/\[b\](.*)\[\/b\]/g, '<b>$1</b>'). Additionally, jQuery's .text() automatically encodes HTML entities, so you will not be able to add stylized text, so you should be using .html() instead. Overall, your code should be:
function PutTextIntoDiv() {
var TheText = encodeURIComponent($('#TheTextInput').val());
$('#TheOutput').html(decodeURIComponent(TheText).replace(/\[b\](.*?)\[\/b\]/g, '<b>$1</b>'));
}
I'm not sure what the purpose of encoding and immediately decoding uri components is, but I tried to keep as much as I can untouched. Here's an updated fiddle: http://jsfiddle.net/TheQueue841/62karfm1/
reposting for simplicity. i want to have the text users enter into an input to replace the label text of another form's input. Additionally, the form is a plugin which doesn't let me attach an id to the specific label tag of the text i want to change. how can i do this, in vanilla javascript please.
the input users put text into:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
the form label i want to change the text in (p.s: cant use the class(not unique to this label), cant add id):
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>
Maybe it is not the best solution, but it is a solution that works in Firefox and Chrome (not tested under IE)
findLabelToChange = function() {
var div = document.getElementById("frm_field_53_container");
return div.querySelector("label");
};
customizeText = function(text) {
return text + ' <span class="frm_required"></span>';
};
change1 = function() {
var label = findLabelToChange();
var text = document.getElementById("name1").value;
label.innerHTML = customizeText(text);
};
you can see a example in this feedle
http://jsfiddle.net/HAK5X/1/
Here is a fiddle.
It is one line of code.
http://jsfiddle.net/te3jv/6/
function change1(myInput){
document.getElementById('frm_field_53_container').querySelector("label").innerHTML =myInput.value;
}
Alternatively add <span class="frm_required"></span> to the end of HTML reassignment to keep your empty (but required?) span.
I have a textbox that I would like to add text to by keyboard, as well as mix in some pre defined phrases from a drop down box. When I first come to the page there is no problem adding the phrases into the textbox, but once I type something in the button stops working
The HTML is:
<div class="tab-pane" id="message">
<textarea rows="4" cols="50" id="send_message" placeholder="Enter text ..."> </textarea>
Add Phrase
<label for=message_list>message_list</label><select id=message_list><option>Hi There.</option><option>How Are You?</option></select> </div>
My jquery is:
$('#message').on("click", "a", function(){
.......
..........
else if( $(this).is(":contains(Add Phrase)") ) {
$('#send_message').append($('#message_list').text());
}
});
How can I fix this?
Use val to set the value of textarea
And val to access the select value.
You were trying to use append on a form element.
$('#send_message').append($('#message_list').text());
supposed to be
$('#send_message').val($('#message_list').val());
Check Fiddle
$('#message').on("click", "a", function (e) {
e.preventDefault();
if ($(this).is(":contains(Add Phrase)")) {
var $message = $('#send_message')
previousText = $message.val();
var currText = previousText + ' ' + $('#message_list').val();
$('#send_message').val(currText);
}
});
Please could you advise on the following:
I have a registration form, and within that a text area
<form id="register" name="register" method="post" action="register.php">
<textarea rows="5" id="bio" name="bio" method="post">Biographical information</textarea>
</form>
Using java script i have been trying to create an event handler for the onfocus and onblur events so the default text is removed on focus and restored on blur, as follows:
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
i thought by getting the element by id would work, but it doesn't seem to be. no other duplication of names/id exist.
Any help much appreciated.
Thanks guys
Use the placeholder attribute:
<textarea rows="5" id="bio" name="bio" method="post" placeholder="Biographical information"></textarea>
It's working fine, perhaps the issue is that the placeholder default is "Biographical Information" and the script is testing for "All about you". The change that you made as I was posting this is exactly what you needed.
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
http://jsfiddle.net/YeaTQ/1/
My educated guess is that you've placed your code as is right into a <script> tag inside <head> so when the script runs the form has not loaded yet.
Move your <script> below the form or wrap everything with window.onload:
window.onload = function(){
// Code goes here
};
You have two solutions:
In order to not use the javascript code you wrote, Use the following code:
<textarea cols="30" rows="5" id="bio" name="bio" onfocus="this.value = '' " onblur="this.value = 'All about you'">Biographical information</textarea>
I think the javascript code is located before control (in the header I guess), Because of this, the onfocus and onblur properties are not initialized. You'll have to put the script at the end of the document (before the tag).
Also, you script is searching for another text ("All about you") and not the current text that's inside ("Biographical information"). Even if you insert the javascript code at the of the document, the code it will work.