Break line defaultvalue of textarea - textarea

I have textarea with defaultvalue like this:
<textarea>
One Two Three
</textarea>
How can i display field like this:
One
Two
Three

Assuming you're referring to the placeholder, this has been answered on here: Insert line break inside placeholder attribute of a textarea?
Note there's no simple way, just some hacks that may work in some browsers and not others like using &#10 where you want the line break.
<textarea placeholder="one
two">
</textarea>
Depending on what you're going for you could set the width or use something like col="5" to force each word to the next line, but that also affects the user input.

My solution here
I replace space character by <br/> tag

Solution:
Break with \r\n with default text area. It will work.
"One\r\nTwo\r\nThree\r\nFour"

Related

How to Add Break Plus Space to Code \r\n\r\n

I am trying add line break plus a space ( ). I know I can do
\r\n\r\n
to get the line break but how do i also add a space. I know in HTML i can do this
<br>
But how would I achieve \r\n\r\n + Space. What characters do i need to add to achieve this. Thank you.
you can't do a return (\r) in html.
You'll need to use Javascript if you want to remove content from an element then replace it with other content.

How do I do a manual line break in an jQuery Mobile button?

I want to have a button with multiple lines. I could add white-space:normal but that does not allow manual line breaks. I have tried with <br> and
but they don't work as a jQM button is text only.
Note that I do not want automatic line-breaks, but I want to decide myself where to put them.
Nor do I want to change the height of the button. No, I want to add extra linebreaks.
i.e. I want to be able to have a button with
Text
like
this
instead of
Text like this
Is there a way around this limitation?
Ok, there is a way to do it. Since I use GWT I can do
JQMButton b = new JQMButton("dummy text");
b.getElement().setInnerHTML("this<br>text<br>works");
a couple of ways to do it
reduce the width of your button, the text would lay out itself in lines
do a shift-enter while typing the text or try a '\n' like this Text \n like \n this

angularjs same textarea to edit multiple elements

I have this case where I set a current item from a list and I need to use a textarea to edit that element's value.
Because of some constraints I have to use a keyup event but I don't think that's a problem.
Check this fiddle: http://jsfiddle.net/terebentina/Euj2C/
click on first/second buttons - it works, it changes the text in the textarea to the value of each element.
change the text in the textarea to something
click on the first/second buttons again - the textarea is not updated anymore. If you look in console, you can see that it switches between the elements, it's just that the textarea is not updated anymore.
Any suggestions? this is driving me nuts!
I know there is a better way modifying your directive to do this but as a quick fix for now you can try binding your textarea to a ngModel value that is just a copy of the current text in the selected element:
<textarea keyup="" ng-model="keyupText"></textarea>
With this in as your current function:
$scope.current = function(idx) {
$scope.current_element = $scope.elements[idx];
$scope.keyupText = $scope.current_element.value;
console.log('current is', $scope.current_element.value);
}
See this fiddle for an example.

XUL element to break line

I define a label and set its value
<bbox>
<label id="notify" value="Test"/>
</bbox>
The width of the label is fix so if the value (text) is longer then the width
I want the line to break. I tried it with css doing
word-wrap:break word;
But this does not work. Is there a XUL element that provides such a feature or do you know an other technique?
You can do this with either the <label> or the <description> element, but you need to use its textContent rather than its value.
<label id="notify">Test</label>
I believe a xul description is what you want.

Wrap text in list items/buttons instead of hiding the overflow

I'm trying to override the default behavior of list items and buttons in jQuery Mobile, which has text which doesn't fit on one line as hidden overflow.
If you view this on a skinny browser window or iPhone you'll see what I mean: http://m.gizmag.com
I'd like to be able to wrap the text in the h3 and p tags of each list item onto new lines.
Thanks in advance!
Try setting a style of white-space:normal for the elements.
I just did this with an anchor (<a>) element inside a jQuery Mobile listview-styled li, and it worked to wrap the text as I expected. I used Chrome's developer tools to determine where the CSS attributes were coming from and interactively changed them to make it work the way I wanted.
--
Derek
If feasible, enclosing it inside a <div> will also make it wrap. (But finding the affected element and declaring white-space:normal is the more proper solution)
Source: http://forum.jquery.com/topic/list-items-are-truncating-text-is-there-a-way-around-this

Resources