Two different text styles in placeholder - javascript

Is it possible to have two styles in an input box placeholder?
Here is an example of what I'm looking for:
http://i.imgur.com/uQ3zf.png

Options would be use a background image that has the text, or use an element overlay with th text or put the text behingd the imput.
Here's a simple demo that places the text behind the input and hides it on focus
http://jsfiddle.net/GRsQc/1/

One solution would be to position text over the input field, obviously it can be styled as pre your example and hide the text using jquery or javascript when the text field is selected. If you want to provide some code I can be more specific.

Related

Antd4 select maintain text selection in text area when selecting font

I am using antd4 select as a font family/ font size selector. So when highlight text I would like to preserve the text selection highlighting and maintaining focus on the text area when selecting another font.
I have tried to preventDefault() on mousedown, but that didn't work as expected as you can see from the sandbox below. Thanks for any help.
sandbox
EDIT: This was working with antd v3 select but they rewrote it and is no longer working.
Ciao, I modified your sandbox and now text stills highlited and focus is on textarea. In brief:
Added a ref to textarea called this.nameInput.
I replaced onMouseDown function with onChange.
On function onChange I move the focus into textarea by using this.nameInput.focus()

Getting user input text without HTML input elements

Is there a way using angular or just javascript to get the user input text not using HTML input boxes? For example when a user clicks on a paragraph he will be able to change its text without a text area popping so he could input. I tried focusing on angular ngHide element( a input HTML) but with no success. It only focused on the element when its showing.
Try contenteditable introduced in HTML 5.
Try Fiddle.
<p contenteditable="true" onfocus="alert(this.textContent)" onblur="alert(this.textContent)">
Enter Name
</p>
But there is. contenteditable is an HTML attribute that makes divs and cells editable. you can make a directive in angularjs to use that, but beware of the caveats that it introduces.
Take a look at x-editable. It will suit your needs, i think.

Make a text clearable with a close button on click of Submit button

I need to implement a code in jquery, where I can enter any text in the text field, and then after I click on the "Submit" button, that text should turn into a clearable field something like this
I tried putting this box in my textfield, but this makes my whole text field as a clearable field,
$(document).ready(function(){
$('input[type=text]').clearableTextField();
});
I dont want to do this, I want that when i type something in the text field and click the Submit button, it should become a clearable text object.
Any help is appreciated!
Thanks.
One way to achieve this (similar to the way tag entry is done on Stack Overflow) is to have a separate div to the left of your input field into which "clearable text fields" are placed. When the submit button is clicked (or the spacebar is hit, or any trigger that javascript can listen for), have javascript create a new span within the left div, and reduce the width of the input field by the same width as the new span tag. You can include a delete button and any relevant styling in the HTML/CSS for the span.
A demo which achieves a similar effect through jQuery is available here: http://xoxco.com/projects/code/tagsinput/. (Suggested by #sachleen in response to a similar question)

Show Error symbol under some text in textarea -similar to spelling error line

Is there any way to add underline or some error symbol under some text in textarea ,similar to spelling error (red underline).
I think you can't do this type of rich text formatting with a simple textarea. I suggest you to search a JavaScript plugin for this. Take a look:
http://www.dynamicdrive.com/dynamicindex16/richtexteditor/index.htm
No. a textarea is unformatted text. You cannot apply any styles to individual portions of it, only the entirety. For sub-portions of the text, you'll have to use a richtext editor which dynamically replaces the textarea with another element that has contentEditable=true enabled.

Boldening text "Inside" a textarea

I have a textarea #myarea into which I'm typing text. I've typed this text.
This is a sentence and only this word
will end up being bolded
Now I have a button on the side, like a bold button. I want to select the letters I want bolded, click the button, and see those letters turn bold inside the textarea. It's similar to the standard functionality found in many editors, but I'm looking for something much simpler as I described here.
So is there a way to do this with jquery? I'm guessing it's a 2-part problem. I need to find the letters selected, then apply bold to them so it shows bold inside the textarea.
If you don't mind using a div that has its ContentEditable property set to true then you can easily do this using:
document.execCommand('bold',null,false);
You can easily style this div to look and feel like a textarea.
See jsFiddle here: http://jsfiddle.net/hqvDT/1/

Categories

Resources