Counting Character of jwysiwyg text editor? - javascript

I am trying to set maximum character length for an jwysiwyg text editor.
I tried to use .keyup function. But its not working. I am using
dwr.util.getValue("jwysiwyg") //Its a dwr utility to get the value of an element.
to get the content of the text editor.
jwysiwyg is the id of text area. Its working.
But if i try to use the same id like,
$("#jwysiwyg").keyup(this.countChars);
Its not working.
Is there any other way to get the .keyup event of an text editor?

try
$("#jwysiwyg").keyup(function(){
return dwr.util.getValue("jwysiwyg").length; // or try ur code here this.countChars(if length doesnt work)
});

Related

In javascript, how can I check to see if a textarea has only one line worth of text?

I would like to make a different behavior for a textarea if textarea has more than one line worth of text.
However, by default, if I make a textarea, text area has enough height for 2 rows to begin with even without any contents.
I do not want that.
How can I check to see if I have single line in a textarea or not with javascript?
jQuery: $("#myTextarea").rows
vanilla JS: document.getElementById("myTextarea").rows

Selenium clearing and typing in text into textarea text box [Python]

I am using Selenium to do some scraping. I used the following code to input the text into a textarea text box:
def clear_and_send_key_then_wait(element, key, sleep_time = 1):
# For some reason this does not work
# element.clear()
# This works
element.send_keys(Keys.CONTROL + "a");
element.send_keys(Keys.DELETE);
# Input text
element.send_keys(key)
time.sleep(sleep_time)
target_textbox = driver.find_element_by_xpath(
"""/html/body/div[2]/div/div[2]/div[1]/div[4]/div[1]/div/textarea""")
clear_and_send_key_then_wait(target_textbox, 'z'*100000)
Q1: Why doesn't element.clear() remove the existing text in the textbox?
Since a lot of texts have to be typed into the text box, the above method is too slow. Instead, I use the first Javascript method execute_script suggested here.
However, simply doing the following does not fill the text box.
driver.execute_script("arguments[0].value=arguments[1];",
target_textbox, "z"*100000)
The text only appears after another send_key command follows immediately after the execute_script line:
driver.execute_script("arguments[0].value=arguments[1];",
target_textbox, "z"*100000)
target_textbox.send_keys(Keys.ENTER)
Q2: Why is the subsequent target_textbox.send_keys(Keys.ENTER) required? It seems like in the link, the author does not need to send Enter key. Is it a different type of text box? If so, what are the different types of text boxes and do they all have different behaviors?
Thanks in advance!
Selenium doesn't fire any keyboard or mouse events on clear. Same happens when you set value using JavaScript. Probably the website waits for the keys event to proceed some work for the textarea's value and trigger for that is send_keys with any key.
You can try the code below, \ue007 is Enter key:
driver.execute_script("arguments[0].value=arguments[1];", target_textbox, "z"*100000 + "\ue007")

javascript - input type = radio disappears when changing text

Im trying to change the text of a radio button.
In the beginning I got this:
but when I change the text with jquery I get this:
I tried $('label[for=id_players_choice_0]').text(x) and $('#id_players_choice_0').text(x) when x is my new value.
As you can see here http://api.jquery.com/text/#text2, jQuery text method changes the content of element. It results in removing all child elements and replacing it with the value of the parameter string used in text(string) method.
You should put the text content into separate element and edit its value by the text() method.
For example create a span element inside the label and use $('label[for=id_players_choice_0] span').text(x)

How to change and track changes to a textarea

I found it really hard to come up with a question title for this one so I apologise that it's fairly cryptic but I'll try explain better there.
Basically part of an app I'm developing involves placing 'placeholders' in a textarea and then modifying those placeholders outside of the textarea.
For example:
This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.
Basically i have JS that detects these placeholders and creates input boxes to hold the text. So there would be an input text box for first and one for second.
What I want to achieve is when I type a value into the textbox it changes the placeholder in the textarea to the content being typed into the textbox. Think sublime text editor's snippets for a textarea.
I'm trying to figure out how I can track the placeholders in the text area. For example if a placeholder was <first_name> and i started typing into the placeholders textbox 'Billy'. I could easily change the placeholder by using a string replace function. However now the placeholder <first_name> doesn't exist in the textarea and so now I can't go back and change it. I need to have a way of tracking these placeholders whilst they are changing.
I hope that makes sense.
If you're not bound to a <textarea> element, you can try with a simple div with the attribute contenteditable="true". This way you can use some <span> to mark all the placeholders.
I set up a demo on jsfiddle, try it.
Using an element with contenteditable="true" would be easier for that task, because you could represent placeholders as span elements and you would then only have to retrieve them by id or any other unique attribute to update their content.
If you have to use a textarea and the users can only modify it's content using external inputs, maybe you could initially track the index of each placeholers and their length and keep those synchronized as values are changed.
You could then easily replace content in the textarea. For example, if the placeholder starts at 15 and has a length of 13.
var string = 'this is a test {placeholder} bla bla bla',
placeHolderIndex = 15,
placeHolderLength = 13;
string =
string.substring(0, placeHolderIndex)
+ 'new value'
+ string.substring(placeHolderIndex + placeHolderLength);
//update indexes of every placeholders that comes after this
//one and update the content length of this placeholder.
Obviously, you don't want to hardcode any values and you will want to handle this process in a dynamic way, but that's just an example.
NOTE: I guess users can modify the textarea content if you're using one. In that case, it would make things a bit more complicated, because you would have to update the index of the placeholders for every modifications the user does and you would also have to prevent them from editing the placeholders-mapped text directly.

I am not getting the label text as if modified in textarea..how can i get that?

I am using a textarea and will modify the text like bold,italic,text-color.. now when i click a button i am extracting the text from textarea.now problem is the text is not visible as modified text...the simple text is seen...so what should i do to get the modified text same in label generated...
function createLabel()
{
var text=document.getElementById("heading");
var textVal=text.value;
var label=document.getElementById("LabelShow");
label.innerHTML=textVal;
}
A standard HTML <textarea> only works with plain text - any formatting you apply to the control is for presentation only and doesn't affect the text returned. If you want to edit rich text in a web page then you need to use a control such as CKEditor.

Categories