Is there a way to get an <input />-field in HTML to wrap lines if the text is longer than the field using CSS? I don't want to use <textarea /> as I want to avoid users entering hard line-breaks by pressing enter.
No, sorry. <input type=text> is single line by definition. See the W3C document Forms in HTML Documents:
text
Creates a single-line text input control.
Using Dojo's Dijit TextArea form control, based off TextArea, you can have an input field which begins as a single line and expands as the user adds to it.
See its documentation.
You can't do what you want with CSS alone, but you could use JavaScript to prevent the user from entering line breaks in a <textarea> field.
Look at this,
http://www.echoecho.com/htmlforms08.htm
The wrap options are the most tricky part of text areas.
If you turn wrap off the text is handled as one long sequence of text without linebreaks.
If you set it to virtual the text appears on your page as if it recognized linebreaks - but when the form is submitted the linebreaks are turned off.
If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks included.
Your best bet is use a textarea (with autogrow capabilities if you like), and then strip out the new lines when the form is submitted. Using php it would be something like this:
$text = str_replace(array("\n","\r"),'',$_POST['text_field']);
This would have the desired effect of blocking newline characters. As others have pointed out it's not really possible to get multi-line input in an input field.
Related
I need to show paragraph marks, spaces and other formatting marks in a contenteditable div as you can in MS Word by pressing the Formatting Marks button Formatting Marks button http://blogs.mccombs.utexas.edu/the-most/files/2011/04/show-hide-button-in-outlook.jpg
Is there a simple way to achieve this?
<html>
<head>
<style>
span::after{
color:black;
content:"\00b6";
}
p::after{
color:black;
content:"\00b6";
}
</style>
</head>
<body>
<h3>
<span class="label">This is the main label</span>
<span class="secondary-label">secondary label</span>
</h3>
<P>Quote me</p>
</body>
</html>
Creating a font which draws spaces as dots and newlines as paragraph marks should solve your problem.
In code it will look like
.editable-div {
font-family: "Your custom font with spaces as dots and stuff", "Actual character font";
}
Here's an article which elaborates on this approach http://www.sitepoint.com/joy-of-subsets-web-fonts/
(I don't have access to Word, but I'm assuming it's the exact same functionality present in most text editors, or InDesign's 'show hidden characters' option &c.)
No, there definitely isn't a simple way to do this, because it's a fairly complex feature.
Your best bet if you really want to do this is to capture the input within the div as a user enters text. Something like Bacon that can easily capture keyed user input as a stream (and allow you to map across the stream) would simplify the process somewhat.
You'll then need to replace* (in realtime) every space/paragraph mark/&c with a relevant marker for the user. The actual input still needs be either saved as typed, or parsed again before saving to strip the new, pretend characters. And though you can use use unicode entities for many of the markers (pilcrows, maybe?), a space (for example) will still show as whitespace (or as the entity code if escaped), so you would need to use a representative icon - essentially, the majority of the hidden characters will each need to have their own specific, defined rendering rules.
This is all fairly nightmarish. It's doable if you can ensure the max amount of text can be kept small, and if you can control what users can enter. For large amounts of text, I can see it becoming horrific: not sure what the JS overhead would be in terms of performance, but I can't imagine it would be particularly good.
* or append - for example newlines/carriage returns etc need to be both displayed as a marker, and actually occur within the contenteditable element.
Edit: What you could do in addition to the above is to edit a font, replacing/adding unicode points for hidden characters instead/as well as visible ones - you would still need to capture input, but this would remove a few headaches. It would deal with spaces quite nicely, for example. Still a bit of a nightmare, but hey.
Whenever I try to submit a text containing special chars like &, via a HTML form in a <textarea>, some chars are lost. (tested in Chrome browser)
So far, I could not find a form attribute to change this behaviour.
How to force the form to submit the input without this loss?
The children of a textarea are bog-standard text nodes. The element doesn't perform any automatic CDATA magic (like a script does).
If you have <textarea>&</textarea> then that means "A textarea element with a default value of 'an ampersand'".
If you want "&" to be the submitted data, then you have to represent the & with a character reference, just like (almost) anywhere else in HTML: <textarea>&</textarea>
OTOH, if you are typing & and the amp; part is being lost, then it is probably because you are taking the value of that form control and treating it as HTML when you want to treat it as text. How you treat it as text instead of HTML depends on what you are using to process the data.
Im not sure on how to explain this but, what I want to know is there if there is any way to "lock" just one part of an text area in a html form. Example:
<input name="example" type="text" id="example" valeu="__this part cant be modified__, and here user insert aditional info" />
And then I get this field value as like: "this part cant be modified + what user typed"
Thank you
I don't think you can, your best bet would probably to just append your default value to their input upon submission.
No, there isn’t, not for input elements, not for textarea elements.
You can however create an impression of such behavior, e.g. having some text and an input element on the same line and setting their style as similar as possible (setting all text, background, and border properties). Of course, the form data would still consist of the input value. And prepending the fixed text to it in client-side JavaScript would be possible but normally pointless, since it would be inherently unreliable and since you can simply make the form handler behave as if it got that string (i.e., make it have it as built-in data).
I have a Textbox:
Now i want to highlight specific characters in this textbox with a colour. (for example "Text")
Is this possible?
Use ajax/jQuery for highlighting particular selected words in a textarea while writing words.
Check this link- http://bytes.com/topic/javascript/answers/820173-highlighting-searched-word-text-area
There is another way without using Javascript to place a text on a textbox. But the text will be ash all the time. There is a tag name "placeholder" on HTML. That may help
<input type="text" placeholder="text" name="inputbox">
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>