This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How do I make an HTML text box show a hint when empty?
A very simple question. I would like to place a tooltip within a Textbox similar to the StackOverflow log in. I want the word discount on the textbox value and when the user enters a new value, the word "discount" disappears from the Textbox.
Can I do this by myself using events like OnBlur, OnChange, etc (I don't know which)? Or there is something around that is already done?
Thanks
As said by rudeovski, you can use placeholder in modern browsers.
But for the older one, you'll need a javascript/jQuery fallback.
Here is a good example:
http://uniquemethod.com/html5-placeholder-text-with-modernizr-and-jquery-fallback
This will generate placeholder fallback for you automaticly. You simply have to write:
<input type="text" id="discount" placeholder="discount" />
Modernizr combined with jQuery will do the rest for you.
Hope this help :)
You can use placeholder text for this.
<input type="text" id="discount" placeholder="discount" />
To make it work on all browsers, you need to use jquery/javascript for it. As far as i know, it doesn't work in IE.
Related
Working example with normal textarea
If you have this code code:
<textarea dir="auto"></textarea>
And you start writing, e.g., Arabic, you'll find that the text is automatically right-aligned, as it should be.
Non-working example with Angular Material's textarea
<mat-form-field appearance="outline">
<mat-label>Post</mat-label>
<textarea dir="auto" matInput></textarea>
</mat-form-field>
If you start writing, e.g., Arabic, unfortunately, the text remains left-aligned :(
The question
So, the question: How to use dir="auto" with Angular Material's textarea? Or how to get the text right-aligned in Angular Material's textarea when the user starts writing Arabic automatically?
Previously, I couldn't even get dir="rtl" to work with Angular Material's textarea. But thanks to the the example in this GitHub issue, seems like it's possible by setting dir="rtl" on the parent form.
So, perhaps a temporary workaround is possible by having the form's dir attribute take its value from a member variable, and take this variable's value from the user or calculate it based on the first character in the textarea or something.
But yeah, not a perfect solution and I hope someone has a better one. But it partially answers my question so I'm going to leave it here in case it's a solution for someone else as well.
I want to know if there is a way to change HTML input type="date" element from this:
to something like:
mm.dd.yyyy
So I want to know how to change the separator.
Is there a way to do this or should I use some custom date component ?
Try this.
<input id="date" type="date" value="2017-06-01">
Note that its also depends on browser potentional website user is using. :)
You need pattern attrib in your input to match your desired format however not all browsers support that. Workaround is to use input="text" instead and then use your custom code.
As per MDN:
One way around this is to put a pattern attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
pattern: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the best way to replace the file browse button in html?
How to style “input file” with CSS3 / Javascript?
Is possible to change the style of <input type='file' /> ?
If yes , how to change? chrome shows file name which i have been chosen in file browse input.
How to Hide file name in file browse input?
Asked before:
How can I style a file input field in Firefox?
Styling an input type="file" button
How to style "input file" with CSS3 / Javascript?
Styling <input type="file">
Change cursor type on input type="file"
https://stackoverflow.com/questions/3984815/jquery-best-way-to-style-a-input-file-tag
how can i style input file textbox?
If you had search it then it would have given you the best possible answers from StackOverflow itself.
Hope it will work !
No, it cannot be changed.
However there is a trick widely circulated around the web. The idea is to give the <input type="file"/> an opacity value of 0.1 and position it on top of an image. For all practical purposes it will be invisible and only the picture will be visible, but it will receive mouse clicks. With some Javascript then you can show the selected file name(s) elsewhere on the page.
You can do with few lines of javascript. Here is the sample demo http://jsfiddle.net/eyjsF/
I have error messages in anchor tag. When you click on it, it should focus/take the cursor to the respective form field. It works in IE but does not work in FF or Chrome. Am I doing something wrong here?
I have a sample in jsfiddle. http://jsfiddle.net/JaaTK/
I don't want to use JavaScript to achieve this.
EDIT I will have to go JS route as there doesn't seem to be a better way.
If you don't want use javascript - you have to use “label” tag instead “anchor”, i.e. instead of:
Go to the first name
you can use:
<label for="firstName">Go to the first name</label>
Why not
Go to first name
I think is the only way.
"I don't want to use JavaScript to achieve this."
Then you are out of luck. Applying focus to an element is JavaScript's job.
UPDATE
So, based on your comment, I think you are asking the wrong question. I think you want to ask:
"Is there a way to make my error messages more accessible?"
The best way to handle that would be for your error messages to link to the form field's LABEL rather than apply auto-focus to the field. At least, that'd be the best way to handle things sans JavaScript.
Error Message
<label for="field1" id="fieldlabel1">Label</label><input id="field1" />
I have an HTML form with radio buttons, check boxes, text fields and drop down lists.
Since I want user to fill everything in my form, none of the radio buttons and check boxes are checked and the text fields are empty.
I would like to write a CSS file that will fill the form with answers (I don't want to change my HTML file).
Is this possible ?
I would appreciate an example or any other idea ?
Thanks !
No, it isn't possible. CSS is for style, not markup, and changing the contents of an input field requires modification of the markup.
It sounds like you might want to consider JavaScript, which can be used to alter the contents of any element, including form elements.
Javascript is your best bet. If you want to fill in -sample- answers, however, like 'First Name' in the text area what would be labelled "First Name: " you can do something like <input type='text' value='First Name' name='emailForm'> and the value attribute will be filled in when the page loads.
You can use jQuery to accomplish what you want quite easily, using CSS-style syntax.
Here's a sample form:
<form ...>
<input name="firstName" />
<input name="lastName" />
</form>
And corresponding jQuery/JavaScript:
$(function () {
$("input[name=firstName]").val("John");
$("input[name=lastName]").val("Doe");
});
Should be easy enough to extend to a larger and more complex form. You can easily use classes or ids on the elements and in the jQuery selectors, as well.
CSS is for designing and styling the webpage. Although its capabilities have been exploited to pull of many tricks it is not a fix-all solution. What you need to do is pull the data you need to fill and put it in your fields.
You can do this two ways:
Use a server side language like PHP/ASP.Net to pre-fill this information.
Use Javascript/Jquery/MooTools or some other framework to fill it on the client-side, picking up the data from the server.
If the information is static then it is very easy, because you can just put this info as a part of the HTML content itself.
If this answer doesn't work for you, add more information to your question.