Wondering if this is even possible, but if I have a input containing text, for example lets say the word 'Test' is in the input. What I would like to be able to do is change the styling on the individual letters of the word 'Test'
I would like the 'Te' to be bold and then have the 'st' be regular.
It wouldn't have to be bold, maybe I would like the 'e' to be red or something like that.
Any ideas on how this might be accomplished?
Don't think it is possible (will do some more test).
What about adding a contenteditable div which looks like a input?
Simple contenteditable exmaple: http://jsfiddle.net/PpEx7/
EDIT
Nopez not possible. :)
You should take a look at how HTML WYSIWYG editors are build.
Basically, they
hide the input field and display another html element with the styled content:
Highlight text as you type on textarea
or
use design mode in html:
javascript Rich Text Editors
both ways are not trivial...
If you take a look at the MDN CSS Reference you can see for yourself that there is no selector for single letters inside a field.
The best you can do is use :first-letter
But As you can see it does not work on <input />
No it's not possible with an <input type="text"> tag. You can however trick the user into believing he is using a styled input by replacing it with a contendeditable div or something.
However, I looked into this couple of years ago, and it's a mess if you want a reliable cross browser solution for this.
Unless I remembered wrong the html from just showing a bold text in a contenteditable div could easily result in the following across the major browsers:
<BOLD style="font-weight:bold">Bold</BOLD> <!-- IE -->
<span style="font-weight:bold">Bold</span> <!-- Chrome -->
<b>Bold</b> <!-- Firefox -->
<strong>Bold</strong> <!-- Safari -->
<lol style="fOnt-WEIGHT: bold;">Bold</lol> <!-- IE6 -->
No kiddin.
Related
I have an html text that has some html tags.
My Question :
How can I add that text into a label without those tags but keeping the text alignment?
For example :
if I have an "< /br>" as tag I need the same effect in the text added to the label but without the "< /br>" appearing in the text.
How can I make that?
Couple solutions, if it is only about spacing (<br>) you could actually just replace the <br> with \n with regular expressions for example.
If it is more complicated (bold, italic, underlined, links) you can use Attributed Strings. If it is much more complicated than the supported types in Attributed strings you can use a webview, or StyledLabel.
In Android you can apply
Html.fromHtml("Html text")
i hope this could be help you.
Well, I would like to hightlight part of the text in a textarea tag, like facebook does it when you are linking someone in your status update. how do I do that?
Thanks in advance.
What facebook do is they have a div sitting under the textarea which updates on keyup on from the textarea, which can obviously use tags and css to change how the text looks, they wrap the highlighted words in b tags which have background: lightbluecolor; font-weight:normal
So your markup would look something like this
<div class="highlight">
hi <b>Dave<b> how are you?
</div>
<textarea></textarea>
.hightlight { position:absolute }
.hightlight b { font-weight:normal; background:#FEFAE2 }
$('textarea').keyup(function(){
// do stuff with detecting the mentions but essentially:
$('.highlight').html($(this).val());
})
You're going to need the help of Javascript to do this. Because the solution is, I believe, a bit too complex for this Q&A site, I would suggest Googling tutorials, for example: http://www.developphp.com/view.php?tid=1192. There are also some great examples for you to examine: http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
Use this jquery plugin http://plugins.jquery.com/project/htmlArea
from the website
With this very basic plug-in, you can allow any HTML inside a textarea
- with full jQuery UI Theme support.
It's as simple as $("TEXTAREA").htmlArea();
There are many options you can set, the colour of the text, position,
show formatting options etc. etc.
$("TEXTAREA").htmlArea({color:'#FF00FF',align:'right'});
If jQuery is in your stack, this plugin should do the trick for you:
https://github.com/mistic100/jQuery-highlightTextarea
I would like to be able to change some of the default attributes which are applied to the html. For example when the text alignment is set to right, left, center. The attribute goes like so:
<p style="text-align:right">some text</p>
I would like it to be
<p align="right">some text</p>
Does anyone know how this can be done.
Thanks.
Do programmatically on the server side after the user hits submit.
I understand some specs have the shittiest requirements but I do not suggest going into the CKEditor code and changing stuff there. It will make it harder to upgrade also.
I find out a solution to assign classes to p element rather than style attribute.
config.justifyClasses = [ 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ];
Then you should add these classes in your css file. Works fine for me.
I am looking to create a javascript/jquery function to wrap a piece of highlighted text from a textarea in strong tags - similar to the WYSIWYG editor here.
Is this possible and if so can you point me in the right direction.
EDIT:
OK so here's a hopefully clearer description of what I want...
I have a textbox on my page which I can type in.
I then want to be able to highlight a part of this text and wrap the highlighted part in <strong> tags
So if the text box had the words one two three and I highlighted the word "two", I want to be able to wrap that word in the strong tags - so becoming one <strong>two</strong> three
Hope this is clearer... I know there are plugins out there but I don't need the full WYSIWYG functionality.
My Rangy inputs (terrible name, I know) jQuery plug-in does this.
Example code:
$("#foo").surroundSelectedText("<strong>", "</strong>");
jsFiddle: http://jsfiddle.net/aGJDa/
I love Rangy! Use it often! But I didn't want to include the whole thing just for this little application, so I did it using document.execCommand to wrap the selected text, then used the href (third parameter of the CreateLink execCommand) to find the element, wrap it with what I wanted, and then remove the link:
document.execCommand('CreateLink', false, 'uniqueid');
var sel = $('a[href="uniqueid"]');
sel.wrap('<strong />')
sel.contents().unwrap();
document.execCommand is supported by all major browsers so you should be safe hacking it this way. In the browsers I've tested, the browser itself will close and open tags for you, so if you're selecting from the middle of one html tag to the middle of another, it should nest the tags correctly.
Does anyone know how to create a tumblr like field as they have on
http://www.tumblr.com/
It's the URL field where some faded text is there then when you click on it, and type, it appends some text ... .tumblr.com that you cannot erase or highlight or whatever. The javascript is obfuscated so I really have no clues on how it was accomplished
I'd prefer jquery but really as long as it works...
Much regards
Edit: I just looked at it again. It takes the input as you type it and adds it into the ghostwriter span that lays above the input field. Pretty simple, really. The ".tumblr.com" text is just in the span itself. Something to the effect of: <span id="ghostwriter"><span id="ghostwriter-copy">Your Input</span>.tumblr.com</span>
There is a jQuery Plugin for that!
https://github.com/michelgotta/jquery-ghostinput-plugin
Demo:
http://michelgotta.de/ghost-input-demo/