I am a fan of using HTML placeholders, as it helps describe to the user what sort of content they need to input. However, sometimes you need to give the user more information than just a simple sentence. Basically I'd like to be able to add line breaks, tabs, etc. into my textarea placeholder. I've heard of using special coding to do this (And have written pieces of code using these), but I find it rather unreliable. For example, certain browsers will display different amounts of white space for the codes. An example of this code would be like the following:
<textarea name="parts" id="parts" placeholder="Some-Part
..."></textarea>
Thus, my thought at a solution would be to have the ability to put actual HTML elements into the placeholder. I have been researching on how I might accomplish this, but have been unable to find anything on it. Do you have any idea where I might go to find functionality similar or the same as this? Or, do you have an alternative of what I might be able to do to accomplish the same thing?
The placeholder attribute has plain text as its value, by definition. No tags are recognized. Character references are recognized, but the effects of characters like TAB U+0009 ( ) are defined to be implementation-dependent.
So no, you can’t have HTML markup there. Your ultimate problem might have a solution, but you have not described that problem. As a rule, if you need placeholder value that is not a short plain text string, you are trying to use the attribute against its definition. It is meant to be a hint that augments the field label and description, instead of replacing them. Normally, any descriptions that are needed should precede the field, and there you can use HTML markup as desired.
HTML is not allowed inside a textarea tag. I'd recommend a different UI/implementation, but you could do something like this:
<div contenteditable="true" class="myarea">
<em>Placeholder</em>
</div>
And then mimic a text area with a css class. Then you could clear the contents on focus
var firstFocus = true;
$('#myarea').focus(function() {
if (firstFocus) {
$('#myarea').html('');
firstFocus = false;
}
});
As you can see, it starts getting pretty ugly. This won't behave exactly the same way as the placeholder attribute either, so you'd have to manage text cursors and change events, etc. Generally I feel placeholder text is a rather poor UI since the info disappears as soon as you start typing :p
I was able to find this answer which uses js to insert line breaks.
Insert line break inside placeholder attribute of a textarea?
Related
My html can look (and sometimes looks) like this:
<p>Some text <b>some <i>more text</i></b></p>a little bit more text
I need to wrap in spans every word within these tags. So the wrapped words would be Some, text, some, more, text, a, little, bit, more, text. I tried to use this code:
html_variable.replace(/(?<=>)[^<>]+(?=<)/g,filter)
where filter is a custom function, using which I easily wrapped every word. However, it turned out that (?<=>), a positive lookbehind, is not yet supported in ios. I am really bad in regular expressions, so I am asking for your help. Is there any well-supported alternative to the code above?
Try with this.
\w+(?![^<>]*>)
See demo here
This may work for you, depending in your input. There are plenty of cases that will make this fail replacing content you don't want to replace (for example content of script and title tags)
Anyways, for a throw-away job and a limited input, It may work for you.
I have a contenteditable div:
<div class="one" contenteditable="true">A</div>
If the user enters HTML, CSS or Javascript tags into that contenteditable div, how would I make it syntax highlighted?
So as the user types in variables, tags, etc, they are colour coded
This is not as easy as it might seem at first.
You can create your own solution using some existing highlighting library like PrismJS or HighlightJS and then implement a custom re-render functionality which saves the current cursor position -> parses the content & updates the look (this would be the task of the syntax highlighting lib), and then sets the cursor to the previous position again.
There is one "tutorial" by bililite which can help you with this task.
You can find it here.
TBH: I'm surprised that there (correct me if I'm wrong) seems to be no open source solution for this. Would there be a need for that?
I have an editable div. The content of that div looks e.g. like that:
This is a <ins>new</ins> chapter.
(The tags are not visible, they are for styling)
If you set the text cursor in front of the "new" everything is fine. But if you set the text cursor behind the "new", the cursor is inside the < ins >-tag and new typed text is also inside the tag:
This is a <ins>new and very interesting</ins> chapter.
But it should look like that:
This is a <ins>new</ins> and very interesting chapter.
How can I set the text cursor behind the tag and prevent that new text is written inside the tag?
OK. The first idea was to made the
<ins contenteditable="false">new</ins>
Inside the contenteditable="true" element. Further reading (contenteditable=false inside contenteditable=true block is still editable in IE8) tells that this is not as always interpreted good in IE. In this post there is a hack answer (https://stackoverflow.com/a/7522910/1125465) but I really do not agree. It is just a mistake which will probably be repaired in the next versions of browsers.
Next I followed this link (HTML contenteditable with non-editable islands) and I haven;t got good news. There is no way of blocking the ins tag from editing so simple. First of all a little note:
If this isn't an additional functionality You must be sure it works as it should. As You wrote The user isn't allowed to write inside the -tag, so all the options:
working in almost every browser...
working with a little bug...
working but if someone...
must be rejected. So if someone turns the javascript off, it should work too. In that case I've come to the first conclusion (as always): server side verification MUST BE DONE.
This will prevent the user from destroying Your database and doing things he can't.
After server side verifying (and showing notification if something is wrong of course) it is going to be additional functionality. So we should do all we can now, to make it work (but now there is no obligation).
NICE LECTURE :)
https://stackoverflow.com/a/7232871/1125465
http://jsfiddle.net/X6Ab8/
**SOLUTION **
I propose something like... I know this sounds a little bit more like old days with milion tags, but really this will work and will be great.
Make an additional span element between the ins elements (for example using php:
$text = '<span contenteditable="true">'.$text.'</span>';
str_replace('<ins>', '</span><ins>', $text);
str_replace('</ins>', '</ins><span contenteditable="true">', $text);
Make this span editable, and only this span editable (not the block container). That's all. Solution is simple, clean, much more efficient and almost 100% safe. And nice...
ADDITIONAL SAFETY when using javascript hacks
If You need it to be done fully with javascript (maybe someone has idea how?), for total safety I would propose additionaly something like this:
Add data-noneditable-id="id" to each non editable element inside the main block editable container. Now every non editable element has it own unique id (can be done using jQuery for example using selector $("div#editable ins")).
Run a javascript that will run through all the objects that has attribute "data-noneditable-id" and save their innerHTML in array (for example: 1 => 'new', 2=> 'added', 3=> 'inserted', ...).
Now if someone edit any of them, You can easily repair them.
PS. This should also help a little... (https://stackoverflow.com/a/4979828/1125465).
Hope it helps! Best regards.
Been trying to find a good solution for this, but I haven't discovered anything. I've found plenty of plugins that turn an input into a taggable text entry field, but nearly all of them are for adding "only" tags. The closest I've found is this: http://daniel-zahariev.github.com/jquery-textntags/
The problem with that, though, is editing. If you type 10 sentences and put a tag in each one, then click back up to, say, the 5th sentence and decide you want to add another tag, the styling gets all out of whack for several of the existing tags... Ultimately I would love to write a patch for this, but I need something quick and easy to implement.
What I ultimately need to end up with is a plugin that allows me to edit paragraphs of text, adding and deleting tags wherever in that text that our editors want without breaking the existing tags... make sense? Thoughts?
Quick question,
If I want to document some code on a basic HTML and put that within a CODE tag, how can I quickly convert the code between those tags when the page renders to display properly? I know I can write a javascript find and replace and search through the string over and over until its done replacing all the characters, but is there a better way?
Or, is there a jQuery way to do it if I need to use javascript?
I think the <code> tag is more for displaying with a certain font, rather than layout. <code> seems to just use a monospaced font.
You might be looking for the <pre> tag (for pre formatted). That will preserve line breaks and spaces.
Unless the code you are trying to display is HTML code itself, then I think you'd have to change all the <'s to <'s ahead of time
Sounds like you may be looking for syntax highlighting. Take a look at google's syntax highlihter