Develop Reference

Insert newline <br> at the end of textarea line

I have a form (an within the form inter alia a textarea) which is send by an ajax post request to a php file. In the php file I send a html mail with the content of the form. The textarea has a fixed size (cols, rows and maxlength).
This is the textarea:
<textarea class="form-control font-consolas" id="hellotext"
wrap="hard" cols="36" rows="10" style="width: auto" maxlength="360"
data-limit-rows="true"
name="hellotext" required></textarea>
I successfully convert the new line:
var hellotext = encodeURIComponent($("#hellotext").val());
hellotext = hellotext.replace(/%0A/g,"<br>");
This is an example of a converted text:
Hello, this is a short test. Now a NewLine is coming in the word previous NewLine.
Thaaaaaaaaaaaaaaaaats a short teeeeeeeeeeeeeeeest (new line in teeeeeeest).
NeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeLine
But the text should make each line a NewLine at character 36. Of course, a whole word must not be truncated, but a word longer than 36 characters should be. As the user sees it in the input:

Why not use editable div? It automatically breaks the lines you want. Given that you provide the right styling to the receiving end. e.g. white-space: pre-line
Click here to know how to add the div manually to the form: Getting value from contenteditable div
let editablediv = document.querySelector('div')
function output(str){
document.querySelector('pre').textContent=str
}
editablediv.addEventListener('keyup',function(event){
output(event.target.innerText)
} )
let msg = 'Nehemiah 8:10 \n\n Do not grieve, for the joy of the Lord is your strength. Isaiah 41:10 So do not fear, for I am with you; do not be dismayed, for I am your God. I will strengthen you and help you; I will uphold you with my righteous right hand.'
editablediv.textContent=msg
output(msg)
pre{
white-space:pre-line;
width:50%;
}
#ed{
border:1px solid #000;
width:50%;
}
<label for=ed><h3>Editable Div</h3>
Click on the box below to edit it;</label>
<div id=ed contenteditable=true></div>
<h3>Output</h3>
<pre></pre>

add new line in textarea not working in my CI project [duplicate]

How do I save user-entered line breaks from a <textarea> HTML element to a database?
It always removes the line breaks.

TextArea HTML element is preserving the white space in the database.
The problem appears when trying to display the \n on the web browser, which will fail.
To display \n in the web browser use :
<p style="white-space: pre-line">multi-line text</p>

When displaying the content you need to convert line breaks into <br /> tags, otherwise the web browser won't display them. This is probably why you think they aren't being saved. If you're using PHP, use the nl2br() function to do this. In other languages you could do a string replace, replacing all occurrences of "\n" with "<br />".

Just put the output text between <pre></pre> tags, that will preserve the line breaks.

I just learnt to use php's nl2br function and it is working fine for me.
I'm using it to style how my users receive an email when sent from another user.

Your problem will be solved using 'white-space' property: simply use:
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
And continue your work.

I know from experience that Browser text areas are less well-behaved than one would like, especially with regard to line breaks.
You could can to see if javascript would be able to interrogate the text area and find the line breaks before the text is sent to the server and so send the data in a more well-formatted way. But the amount of javascript debugging necessary to make this work across multiple browsers is probably not worth the effort.
Perhaps you should say that format you are trying to capture your data. There may be a better way to get the data than keeping track of line-breaks - though lines breaks can seem like any easy thing to capture in user input.

I noticed that breakable content saved normally if textarea is inside a html form. But if I use textarea without any form and try to edit a long text in it, insert line breaks and save content via ajax, it's saved as a merged text into database

Use PHP nl2br() Function while saving data from textarea to database
like below
<textarea
name="PostContent"
class="form-control"
rows="12" cols="30"
id="PostContent"
required=""
style="white-space: pre-wrap; text-indent: 50px;"
>
</textarea>
$PostContent=$_POST["PostContent"];
$output =nl2br($PostContent);
use $output variable to save to Database

you can add text in the text area and see the formatted text below.
function ex() {
const text = document.getElementById("description").value;
const ss = document.getElementById("add");
ss.textContent = text;
}
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
</br>
<button onclick="ex();">check</button>
</br>
<p style="white-space: pre-line" id="add"></p>
<style>
p {
color: red;
text-align: center;
}
</style>

Can not type in a text box using python selenium

I'm trying to send keys to the following textarea html using python selenium:
<div class="spk-c spH-d"><div id="gwt-uid-23" class="sppb-a">
<div class="sppb-b spk-b">For example, flowers or used cars</div>
<textarea rows="2" aria-labelledby="gwt-uid-64 gwt-uid-23" id="gwt-debug-keywords-text-area" class="spk-a sppb-c">
</textarea>
</div>
<div role="alert" class="error" style="display:none"> Input contains a keyword that is too long. </div> <div class="error" style="display:none">Your product or service description can't exceed 1,000 words. Remove some words and try again.
</div>
</div>
and I get this error:
selenium.common.exceptions.ElementNotVisibleException: Message: Element is not currently visible and so may not be interacted with
Stacktrace:
here is my code:
textarea='textarea[id="gwt-debug-keywords-text-area"]'
element = WebDriverWait(driver, 15).until(lambda driver : driver.find_element_by_css_selector(textarea))
driver.find_element_by_css_selector(textarea).send_keys('plumbers')
Can you please help me out? It's been bugging me for a while. The html is from google keyword planner.
Thank you

You can use expected conditions to wait for the text box visibility
WebDriverWait(driver, 15).until(expected_conditions.visibility_of_element_located((By.ID, 'gwt-debug-keywords-text-area'))).send_keys('plumbers')
Edit
You need to switch to the iframe with the textarea in order to interact with it
# by the frame id attribute
driver.switch_to.frame(id)
# by the frame name attribute
driver.switch_to.frame(name)
# by the frame webelement
frame = drive.find_element(...) # locate the frame
driver.switch_to.frame(frame)
And to switch back
driver.switch_to.default_content()

The problem may not be with your selenium code, but the workflow for using the tool. I am not familiar with this adwords keyword planner, but when I did a Google search for the id of that text area and selenium, I came across some github code that looks like it is enabling the text area first:
browser.find_element_by_id("gwt-debug-splash-panel-find-keywords-selection-input").click()
browser.find_element_by_xpath("//textarea[#id='gwt-debug-keywords-text-area']").send_keys(keyword)

Try to use JS code to make element visible before sending text:
driver.execute_script("document.getElementById('gwt-debug-keywords-text-area').style.visibility = 'visible';")
driver.execute_script("document.getElementById('gwt-debug-keywords-text-area').style.display='bloc‌​k';")
Let me know if any exceptions occurs
UPDATE
If you want to send text to text area using JS you might need to execute following:
driver.execute_script("document.getElementById('gwt-debug-keywords-text-area').innerHTML='Here is some text';")
or
driver.execute_script("document.getElementById('gwt-debug-keywords-text-area').value='Here is some text';")

How to validate or wrap user inputted HTML to fix unclosed tags

I have text boxes in a form where users can input formatted text or raw HTML. It all works fine, however is a user doesn't close a tag (like a bold tag), then it ruins all HTML formatting after it (it all becomes bold).
Is there a way to either validate the user's input, automatically close tags, or somehow wrap the user input in an element to stop it leaking over?

You may try jquery-clean
$.htmlClean($myContent);

Is there a way to either validate the user's input, automatically close tags, or somehow wrap the user input in an element to stop it leaking over?
Yes: When the user is done editing the text area, you can parse what they've written using the browser, then get an HTML version of the parsed result from the browser:
var div = $("<div>");
div.html($("#the-textarea").val());
var html = div.html();
Live example — type an unclosed tag in and click the button:
$("input[type=button]").on("click", function() {
var div = $("<div>");
div.html($("#the-textarea").val());
var html = div.html();
$(document.body).append("<p>You wrote:</p><hr>" + html + "<hr>End of what you wrote.");
});
<p>Type something unclosed here:</p>
<textarea id="the-textarea" rows="5" cols="40"></textarea>
<br><input type="button" value="Click when ready">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Important Note: If you're going to store what they write and then display it to anyone else, there is no client-side solution, including the above, which is safe. Instead, you must use a server-side solution to "sanitize" the HTML you get from them, to remove (for instance) malicious content, etc. All the above does is help you get mostly-well-formed markup, not safe markup.
Even if you're just displaying it to them, it would still be best to sanitize it, since they can work around any client-side pre-processing you do.

You could try and use : http://ejohn.org/blog/pure-javascript-html-parser/ .
But if the user is entering the html by hand you could just check to have all tags closed properly. If not, just display an error message to the user.

You can create a jQuery element using the text and then get it's html, like so
Sample
<textarea>
<div>
<div>
<span>some content</span>
<span>some content
</div>
</textarea>
Script
alert($($('textarea').text()).html());
alert($($('textarea').text()).html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
<div>
<div>
<span>some content</span>
<span>some content
</div>
</textarea>

The simple way to check if entered HTML is actually valid and parseable by browser is to let browser try it out itself using DOMParser. Then you could check if result is ok or not:
function checkHTML(html) {
var dom = new DOMParser().parseFromString(html, "text/xml");
return dom.documentElement.childNodes[0].nodeName !== 'parsererror';
}
$('button').click(function() {
var html = $('textarea').val();
var isValid = checkHTML(html);console.log(isValid)
$('div').html(isValid ? html : 'HTML is not valid!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="80" rows="7"><div>Some HTML</textarea> <button style="vertical-align:top">Check</button>
<div></div>

EpicEditor text showing as instead of space

Not sure if this is an actual problem per se but I'm using Epic Editor to input and save markdown in my GAE application (webpy with mako as the templating engine).
I've got a hidden input element in the form which gets populated by the EpicEditor's content when I submit the form but all the white spaces are replaced by . Is this an intended feature? If I check the same code on the EpicEditor site, it clearly returns spaces instead of so what's different about mine?
<form>
<!-- form elements -->
<input id="content" name="content" type="hidden" value></input>
<div id="epiceditor"></div>
<button type="submit" name="submit" id="submit">submit</button>
</form>
<script type="text/javascript">
$('button#submit').click(function(){
var content = editor.getElement('editor').body.innerHTML; //all the spaces are returned as and breaks are <br>
$('input#content').html(content);
});
</script>
NOTE: I want to save my content as markdown in a TextProperty field my data store and generate the html tags when I retrieve it using marked.js

I'm the creator of EpicEditor. You shouldn't be getting the innerHTML. EpicEditor does nothing to the innerHTML as you write. The text and code you are seeing will be different between all the browsers and it's how contenteditable fields work. For example, some browsers insert UTF-8 characters for spaces some &nbsp.
EpicEditor gives you methods to normalize the text tho. You shouldn't ever be trying to parse the text manually.
$('button#submit').click(function(){
var content = editor.exportFile();
$('input#content').html(content);
});
More details on exportFile: http://epiceditor.com/#exportfilefilenametype
P.S. You don't need to do input#content. Thats the same as just #content :)

You can do this if you dont find out why:
<script type="text/javascript">
$('button#submit').click(function(){
var content = editor.getElement('editor').body.innerHTML;
content = content.replace(" ", " ");
$('input#content').html(content);
});
</script>

[EDIT: solved]
I shouldn't be using innerHTML, but innerText instead.
I figured out that Epic Editor uses on all spaces proceeding the first one. This is a feature, presumably.
However that wasn't the problem. ALL the spaces were being converted to , eventually, I realised it occurs when Epic Editor loads the autosaved content from localStorage.
I'm now loading content from my backend every time instead of autosaving. Not optimal, but solves it.