I was a bit puzzled by my
<input ng-bind="x.a * x.b" tabindex="-1" readonly/>
expression not working. I can't use ng-model there (as the product is no L-value), so I blindly switched to ng-bind. I guess, it doesn't work because of the funny HTML inconsistency (using value=xxx instead of placing the value in the element text). So I switched to
<input value="{{x.a * x.b}}" tabindex="-1" readonly/>
which solved the problem, but shouldn't input ng-bind work anyway? AFAIK jQuery val() does. Am I doing something wrong?
Side questions:
Is it a bad practice to use inputs which are always readonly?
If so, what's the recommended way? span or label or what?
ngBind set's the element's text content:
element.text(value == undefined ? '' : value); // from the source code of Angular
So, it does not work for setting the value of an input (nor shouldn't it).
I believe it is better to use <span> in place of readonly inputs.
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 have an order form and I need to do something like this:
<input id="myInput" type="text" name="myInput" value='<time datetime="2015-01-01" itemprop="startDate">1.1.2015</time>' class="width-100" readonly />
but in the browser, in the input area, where should be displayed just: 1.1.2015, as I supposed, is displayed the whole time tag: <time datetime="2015-01-01" itemprop="startDate">1.1.2015</time>
...idk why, and I can't figure out how to make this work.
The time tag in input's value is based on date selected from DB and returned by function, like: return '<time datetime="'.date('Y-m-d', strtotime($from)).'" itemprop="startDate">'.date('j.n.Y', strtotime($from)).'</time>';
Any advice would be helpful. Thanks
You can write almost anything you want inside an HTML attribute, as long as you encode it properly (e.g. < instead of <, " instead of ", etc.). All decent programming languages provide built-in methods to take care of the dirty details. Whether those values are valid, meaningful or useful in the context of the precise attribute is a different thing.
<input> elements are designed to hold plain text. Whatever you write into the value attribute will be rendered to the user as-is. If you type HTML tags, you'll display HTML code, nothing else.
If you want to send form data to the server, you can simply use form fields, as you are already doing. The missing bit is that form fields do not need to be visible. There's a specific control for hidden data: <input type="hidden">. From MDN reference:
hidden: A control that is not displayed, but whose value is submitted to the server.
Is there any way to allow a link/anchor within an input field so that whatever text is in the field is ALSO clickable and actionable?
This is unfortunately not possible in HTML 4 or below. Even with HTML5 which has several new INPUT TYPEs, including URL, it only does validation and has some other useful functions, but won't give you want you want.
You might look for some jQuery plugins that can help you do this, most use the same principals behind Rich Text or other online/web-based HTML WYSIWYG editors. I've had trouble locating them myself.
These 3 situations (that I can think of right now) are pretty much what you will face natively with HTML4 or below, as text in an actual HTML4 INPUT textbox is pure text. It is not html and therefore NOT clickable. Here are some variations:
The INPUT tag's VALUE attribute, also referenced as the corresponding DOM object's "value" property (which is basically what you've been doing, and the most you can hope for, if you decide that you MUST have the text that's ACTUALLY inside the textbox (because the text inside the textbox is the VALUE attribute, as I have it with "http://yahoo.com" in this example):
<input id="myTxtbox" type="text" value="http://yahoo.com">
where the INPUT's VALUE = "http://yahoo.com", which you can retrieve with:
in pure javascript:
document.getElementById("myTxtbox").value
in jQuery:
$("myTxtBox").val()
When your link/url is the text in between the <INPUT> and </INPUT>, i.e. the text/innerText of the textbox. This is useless for your question/scenario since it's not clickable, and more importantly NOT INSIDE the textbox. However, someone might want to use this to retrieve any text that you may be using as a label (if you're not using the <label> tag itself already that is):
<input id="myTxtbox" type="text">
http://yahoo.com
</input>
The textbox's text/innerText is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerText
jQuery:
$("myTxtBox").text() -- you would use this to capure any text that you may be using as a label (if you're not using the tag).
The result being: http://yahoo.com
When your link/url is the form of an ANCHOR (<A>) with an HREF to your url (and visible link text) in between the <INPUT> and </INPUT>, i.e. the innerHTML of the textbox. This is getting a bit closer to what you want, as the link will appear as, and function as an actual link. However, it will NOT be inside of the textbox. It will be along side it as in example #2. Again, as stated in example #1, you CANNOT have actual working HTML, and therefore a working 'link' inside of a textbox:
<input id="myTxtbox" type="text">
<a href="http://yahoo.com">
http://yahoo.com
</a>
</input>
Once again, similarly to example #2, the textbox's innerHTML is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerHTML
jQuery:
$("myTxtBox").html()
The result being: http://yahoo.com
I need to know how to make an empty-non-required input element invalid.
For example:
<input pattern="[0-9]+" title="" />
This field is :valid by default, as is not required. I need to turn it :invalid if it is empty.
Thank you all in advance. Cheers.
EDIT:
HTML:
<div>
<input type="text" name="Country" pattern="[a-zA-Z ]+" title="" placeholder="Country" />
Toggle
</div>
CSS:
input:valid + a
{
color: blue;
}
The <a> starts blue since there is no text inside the <input> which is not required.
The pseudo-class :valid state for an empty-non-required <input> element is true.
I need the <a> to remain uncolored when the <input> field is empty.
You need to add the attribute required, which has the same (limited, but growing) browser support as the pattern attribute. There is no way to make an “empty non-required” element invalid, because the required attribute means that the value must be non-empty.
The description of the pattern attribute in HTML5 CR says the attribute is used in constraint validation only if the value is not empty. This could also be said so that an empty string is always regarded as matching the pattern (but it really isn’t even checked against it).
This answer addresses the clarified/modified question, which seems to be about styling. An input element cannot match the selector :invalid if its value is empty, since such an element is exempted from constraint validation (as explained in my first answer). There is no selector for checking that the value of an input element is empty or non-empty. (The :empty pseudo-class tests for the content being empty, and an input element always has empty content.)
So this cannot be done in CSS (alone). You can use JavaScript e.g. so that any input operation causes the input element value to be checked. If the value is nonempty, put the input element to a class, say ok. Modify the CSS selector accordingly.
<style>
input:valid + a.ok {
color: blue;
}
</style>
<input ... oninput=check(this)>
...
<script>
function check(el) {
el.nextElementSibling.className = el.value ? 'ok' : '';
}
This works in sufficiently modern browsers. If wider browser coverage is needed, you may need to add event attributes like onkeypress and onpaste etc. that are used to run the same check. (And nextElementSibling might need to be replaced by some clumsier way of getting at the next element.)
Update, as per the comment below, you can simplify the code somewhat by setting the class on the input element rather than the a element. This means that the CSS selector would be input:valid.ok + a and the JavaScript assignment statement would have just el.className as the left-hand side. Regarding browser coverage, it’s probably not an issue here as compared with the basic restriction caused by the use of the :valid pseudo-class, which isn’t supported by IE 9 and earlier.
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" />