The Placeholder Element which got introduced with HTML5 is great but sadly I really dislike its implementation, that when I click in a field the suggestion text is gone.
I'd like it to be different in the way that if empty it should show the placeholder text if it is focused or not. Basically always show the placeholder except if text is in the box.
I am using jQuery so any implementation which utalizes it would be okay to.
Related
Just as the title says.
I cant find ANYTHING for this particular usecase Online.
This is in context of a website aiming to be AA WCAG 2.0 conform.
I have non-focussable text alongside focussable textinputs inside of a single view.
I can TAB through the focussable textinputs, but I cant read out the textfields inbetween. When I press "arrow down" while having the focus on the textinput I get "empty field" from NVDA. Most shortcuts also unfortunately produce text in the textinputfield instead of executing the associated behavior in NVDA.
Is there any way have the keystrokes being recognized as commands instead of input for the textfield? Is there any keyboard shortcut telling NVDA to behave like this?
Under the hood, NVDA auto switches to Forms mode, so what you're getting is the correct behaviour. if that text is related to the field, then you should use aria-describedby="[id of text]", on the form element.
I wouldn't be looking at anything that changes the default behaviour of how it works, as this will undoubtedly cause issues, for end users.
Could you not put that text in a tooltip, that is only shown when a user tabs to an interactive icon, next to the input (using the aria-describedby attribute too)?
I have several spans that contain text options. Below it I have an input text input field. What I would like to have happen is when a user clicks on one of these text options, that option will move into the empty text field and the text options will reconfigure to fill it's place.
I could probably do something with CSS3 here but I'm looking for other options.
What I'm looking for is similar to what you'll find on stackoverflow at the bottom of the page when you're asking a question. You select tags from a dropdown list and when clicked on they move into the text field.
Is there an efficient way of doing this that won't rely exclusively on CSS3 and that is also relatively backwards compatible?
I am trying to implement Facebook autocomplete functionality after a user types # for a multiline ASP.Net textbox, including highlighting the selected text (this would only be a part of text inside the textbox).
My question is: is it possible to apply different styles inside a textbox or how does Facebook highlight in blue what the user choose from the completion list? How can I achieve the same result with my textbox? As far as I know one cannot apply different css inside the same textbox.
Please help & encourage me.
is it possible to apply different styles inside a textbox
No.
or how does Facebook highlight in blue what the user choose from the completion list?
contentEditable is your keyword. This is a mechanism implemented in newer browsers to make parts of a document “editable”; and with HTML5 is has gotten standardized.
What's the difference between typing some text on a page vs inserting a label and typing some text into that label ?
Any reason why somebody would want to use a label vs just type text on the page ?
The only advantage that I can think of is that a label can be updated easily ( e.g user clicks a button , in the event code for the click action one can write something like label1.Text = "some value" )
Thanks
Labels can be associated with controls using the AssociatedControlID property, allowing the user to click the label to focus the control.
If a label is associated with a checkbox, clicking the label will toggle the checkbox.
You've nailed it. Putting text inside a label control allows you easy programmatic control over that portion of the page, while putting it directly in the HTML requires you to then jump through extra hoops if you want to modify it later.
In addition, you can also programmatically show/hide a label, add css styles, and associate it with an input control (AssociatedControlId property).
You can't easily apply CSS styling to random text on the page.
Edit - Sorry I meant in server side code.
The difference is that typing into a Label causes it to render the HTML from the server side while typing text into the HTML does not.
This is very useful if you want to change the text dynamically or if you need to deal with changing the text for internationalization.
ASP.NET labels should be used to much like HTML labels: to indicate which control this text is related to. ASP.NET also has the LiteralControl, which is just text, and is better suited to your needs.
Typing text directly onto your page is often uncontrollable - It is difficult to control where it will appear, and in what manner. Labels have very predictable features that can be adjusted easily to work with formatting. Furthermore, as your page gets more complicated, having text in labels that is identifiable with IDs makes things significantly easier.
I have a DropDownList control that is populated via server side.
I use a For Each [datarow] loop and create a New ListItem
In the DataRow is a column with the ID 'Title'; this field may contain either <B> or <I> tags. (ex. "[Title] in <i>[Parent Title]</i>")
The problem I am facing is when I [DropDownList].Controls.Add([ListItem]) it renders the text literally... so it displays the <B> or <I> tags literally and doesn't bold/italicize the font.
I have tried looking all over for an answer, can someone please point me in the right direction?
A DropDownList control is rendered as a select element in the hhtml code, and the ListItem controls are rendered as option elements. An option element does not support html formatting in the text. Some browsers may support some styling of the entire option text, but no browser supports styling of part of the text.
If you need html formatting in the dropdown list, you either have to make your own replacement dropdown list control using DHTML, or find someone who has done it already.
You can try adding style attributes to each listitem, but I'm not sure how universally this is supported across different browsers.
ListItem li = new ListItem(dr["Name"], dr["Course"]);
if (bold) li.Attributes.Add("style", "font-weight:bold");
listcontrol.Items.Add(li);
Re-reading your question I noticed you want to mix normal and bold text within a single item in the list. I'm almost certain this isn't supported using the standard dropdown list. I think you'll need to have a look at using a CSS-based control that simulates a dropdown list.
If you need to have the bold and italicized formatting, I'd recommend using an .net Literal control to serve as a placeholder for your drop down list. Then upon postback or databinding, you can iterate through your result set, generate the HTML code manually (since it is not that complex) and then insert the generated HTML into the Literal control.
Indeed this is not possible.
You have a couple of alternatives although they have some minor disadvantages, because they do not exactly behave like a dropdownlist. In most solutions you can only pick an option with the mouse instead of typing a couple of characters. Of course it is possible to program this behaviour but that takes some time and effort.
Alternatives I have found are:
jquery solution from marghoob suleman
jquery solution from sanchez salvador