setting text in textarea using javascript - javascript

I am trying to process the text in textarea [on Facebook group page. 'write post' has one text area] and replace it with new text. This is done using Greasemonkey script
textHolder = document.getElementsByClassName( "uiTextareaAutogrow input mentionsTextarea textInput" )[0];
var vntext=textHolder.value;
var vn2text=Encrypt(vntext);
textHolder.value=vn2text;
So new text is seen in text-area but the when the 'post' button is clicked the new text is not taken instead old text is posted
But if we manually insert at least a character to the processed text then the resulting text is posted after click on post button. So I am not getting why it is directly not taking the new text without inserting the text manually.
There are other events being called in textarea element, but I do not know what they are doing exactly.
So what should be done so that new text will be posted?
DOM for text-area on Facebook page is as follows:
<textarea
class="uiTextareaAutogrow input mentionsTextarea textInput DOMControl_placeholder"
title="Write something..." name="xhpc_message_text" placeholder="Write something..."
onfocus="return wait_for_load(this, event, function() {if (!this._has_control) { new TextAreaControl(this).setAutogrow(true); this._has_control = true; } return wait_for_load(this, event, function() {JSCC.get('j4ef51acb72eb241587530255').init(JSCC.get('j4ef51acb72eb241587530256'));;JSCC.get('j4ef51acb72eb241587530256').init(["buildBestAvailableNames","hoistFriends"]);JSCC.get('j4ef51acb72eb241587530253').init({"max":10}, null, JSCC.get('j4ef51acb72eb241587530255'));;;});});"
autocomplete="off" style="direction: ltr; "
>
Write something...
</textarea>

Can you link to the page in question?
That page could be tracking that textarea's value in JS or even AJAX-posting it with every keystroke. Clicking the 'post' button might merely tell the page/server to use the last saved version of the text.
Since the GM script changes the textarea value independently of mouse and focus events, the page and/or server tracking mechanism won't be triggered.
So, if you can, find the appropriate JS function and call it after changing the text.
If that's too difficult, try setting the focus to the textarea, then elsewhere and then back to the textarea.
Or try sending a keystroke event to the text area.
Link to the page, or a full-code snapshot of it, for more detailed help.

Related

Is there a wat to style just the user input text in a <input type ="text"> not the input field itself?

I am using Cordova to make an android app and I have a text field where the user types into. Im using a keyboard function so I can listen for the done key on a text field. When the event fires I want to be able to "animate" the text that was just entered into the field. I don't necessarily want to animate it, but really just put a circular box around the text so that its clear the input has been accepted.
For example:
This is what it looks like after they've typed their text and before they've pressed done on the keyboard.
Text input before submit
When the event fires I want to style the text as such where the font weight changes and the background of the text gets bubbled. Is this possible?
Text input after submit
In the function that you're using to listen for the done key, you can use Element.classList.add() to add a class to the <input type="text"> element.
const inputElement = document.getElementById('your-input-element')
inputElement.classList.add('recipent-submitted')
Then apply whatever styling you want to .recipent-submitted in your CSS file.

Making a button copy a text

I want to make the "COPY ADDRESS" button copy a text I specify. I already tried to do it myself, but couldn't do it. It is very simple, I just have minimal knowledge.
http://porcelaincoins.com
<a class="btn btn-lg" href="#">copy address</a>
This code will copy the text abc to the clipboard.
function copy(text) {
document.body.insertAdjacentHTML("beforeend","<div id=\"copy\" contenteditable>"+text+"</div>")
document.getElementById("copy").focus();
document.execCommand("selectAll");
document.execCommand("copy");
document.getElementById("copy").remove();
}
<button onclick="copy('abc')">Copy</button>
How does it work?
Firstly, it makes a contenteditable div with the id of copy (don't use this ID anywhere else on your page). contenteditable elements are elements which are designed to be edited by the user, and there is extensive native JavaScript around them in the form of document.execCommand provided to help people make rich text editors. Part of document.execCommand is a copy method, to add text to the clipboard - however this only works reliably with selected text in a contenteditable element.
The next step is for the code to focus on the div. This is as if the user had clicked on it - inputs are known as focused when they are active - for example the focused element in a form will receive the keyboard events
The code then uses document.execCommand to select all of the text inside of the contenteditable div. In the first step, we ensured that this text was the text passed to the function.
Then, it copies that content to the clipboard using document.execCommand("copy"). This is actually surprisingly simple.
Finally, it removes the div from the DOM (i.e. destroys the div)
These actions should all happen so fast that the user will not realise that a div has even been created, however the text will appear on their clipboard.

Textarea removing placeholder and text

I have a web service that brings back data and inserts it into the text area, i dont want this as a placeholder. the first time the user loads the page it should show the placeholder but once the webservice has run it should then show what has come back from the webservice. it has been working perfectly for me on chrome for months but now testing on IE and its not working. the text gets loaded but then disappears as the user clicks in the box. both the placeholder and the text gets removed. when looking at the source the data is being loaded in correctly with the text area showing:
<textarea rows="20" cols="50" placeholder="Insert things here" id="mytextarea">MY DATA</textarea>
in basic "MY DATA" disappears when i focus on the box in IE
Changing
$('#mytextarea').text("MY DATA");
to
$('#mytextarea').val("MY DATA");
made it work because.
textarea is element that takes some input, all these type of element(file, text, textarea, select, etc) has .val() method to fetch/store data, because they are not supposed to store anything inside(as child elements).
In other side elements that are not for interaction(get input from user) like div or section or table etc are for showing any section or data so that has .text() or .html() method. Both method here get/set child of the element (.val() does not do that).
.text() get/set as plain text while .html() does same but it treats data as html. Refer.
Changing:
$('#mytextarea').text("MY DATA");
to:
$('#mytextarea').val("MY DATA");
Made it work, not sure why or how that makes a difference thanks for the help even though I managed to figure it out myself.

Make a text clearable with a close button on click of Submit button

I need to implement a code in jquery, where I can enter any text in the text field, and then after I click on the "Submit" button, that text should turn into a clearable field something like this
I tried putting this box in my textfield, but this makes my whole text field as a clearable field,
$(document).ready(function(){
$('input[type=text]').clearableTextField();
});
I dont want to do this, I want that when i type something in the text field and click the Submit button, it should become a clearable text object.
Any help is appreciated!
Thanks.
One way to achieve this (similar to the way tag entry is done on Stack Overflow) is to have a separate div to the left of your input field into which "clearable text fields" are placed. When the submit button is clicked (or the spacebar is hit, or any trigger that javascript can listen for), have javascript create a new span within the left div, and reduce the width of the input field by the same width as the new span tag. You can include a delete button and any relevant styling in the HTML/CSS for the span.
A demo which achieves a similar effect through jQuery is available here: http://xoxco.com/projects/code/tagsinput/. (Suggested by #sachleen in response to a similar question)

javascript textbox: enter text and it appears instantly in another textbox

Javascripters, a 'puzzle':
Using a simple HTML form, make two textboxes. Whatever text you type (say, some random string of characters like asdfasdf ) into textbox #1 is IMMEDIATELY displayed, on the fly, without pressing any button or changing focus, into textbox #2.
Can it be done using getElementByID?
Simply:
<textarea id="text1" onkeyup="document.getElementById('text2').value = this.value"></textarea>
<textarea id="text2" onkeyup="document.getElementById('text1').value = this.value"></textarea>
If immediately is the most important word, you must handle the keypress event, then add the pressed key to your storage string. Then place that string into your result div or textarea.

Categories

Resources