How do I set the autofocus attribute on an element with reagent, so that the produced HTML looks like below?
<textarea autofocus></textarea>
The effect of course being that the text area will have the focus of the browser once the page is loaded.
I haven't found a way to produce the sought after HTML, but the same effect seems to be achieved through JS by adding the :auto-focus option to your element:
[:textarea {:auto-focus true}]
For the benefit of anyone else searching this topic, I'll add that my own issues with :auto-focus turned out to be due to my password manager plugin. The accepted answer works just fine with the plugin turned off.
Related
I'm trying to make use of execCommand as I thought it is enough for my purpose, but when testing it under IE 8, there is strange thing: only 'italic' options fails to revert (I can set italic but it wont go off for the next execCommand call), or rather the browser cannot recognise that italic was already applied, because when run queryCommandState('italic', false, null)) I receive false. Thing is, that there is problem only with italic other looks ok(actually check couple;-)).
There is another point that I use contentEditable on html element, when I moved it to iframe it worked but I really do not want to use iframes. Furthermore there is styleWithCSS command to force styling html by style attribute rather than by tags like b -> `style="font-weight: bold" But this of course doesn't work in IE too.
Could you please advise or maybe suggest some other tool to handle some basic text editing in html
update: I just run command in js:
document.execCommand(actionToCall,false, args);
it correctly format selected text in my contentEditable:
<div contenteditable="true" type="text" class="myeditor-editable" style="white-space:pre-wrap">
<i>test</i>
</div>
but seccond call do nothing -> it actually tries to append <i></i> again. ( when look at HTML bar in FF console, then I see that there is some manipulation with html but like I said it stays italic)
Edit2: It looks that there must be a conflict in my code as in fiddle it's working(http://jsfiddle.net/kpskxfbo/1/ ), I thought that can be because the result in jsfiddle is returned in iframe but I have try it on my local computer and it looks fine too... I will post update once I found the problem.
I'm testing my web page for accessibility using JAWS reader. Below is a sample HTML markup from my page.
<label for="MySelectBox">Select a color</label>
<select id="MySelectBox">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
When navigating the page through keyboard and changing the select box value using Down arrow key, JAWS is not reading the changing values as you press down arrow.
Anything I'm missing in here? Should I add any additional ARIA labels to make JAWS recognize the change event?
This one does seem strange. You can debug this by first creating test html page containing just the code you pasted here and testing it under same setup. If that works, you might want to go back your page and check for incorrectly formatted mark-up above this select box. Sometimes unclosed tags (typical culprits:<LI> and <BR>) and erroneous JavaScript/Jquery element manipulations create issues with screen readers.If possible, post your rendered page's HTML content here for others to review.
For anyone else who might see this, I was having trouble having JAWS read the ListItems stored in the DropDownList too.
I had been testing this only in Chrome and after reading the comments here tested in Firefox and JAWS would read the ListItems when you scrolled through the DropDownList with the arrow keys. So this must be a compatibility issue with Chrome.
You need to add aria-live="assertive" to the select tag.
Reference : http://www.freedomscientific.com/Training/Surfs-Up/AriaLiveRegions.htm
JAWS not reads the text of <option>Red</option>.
<option> should have aria attribute, that is aria-label="value".
<option> element should be <optionaria-label="red">Red</option>.
I was using asp:Dropwnlist. This has worked for me:
Add aria-live="assertive" to the <asp:DropDownList> </asp:DropDownList> tag
Add arial-label="whatevervalue" to the <asp:ListItem/> tag
Tested using Chrome + NVDA screen reader
I had an issue similar to this, this is what I added to fix it for me. You may need to a different form of activedescendant, but you need something to focus on the selection when you hit the down arrow. https://www.w3.org/TR/wai-aria-practices/#kbd_focus_activedescendant
aria-live="assertive value" aria-required="true" aria-activedescendant="ID_REF"
Hi I'm working on an iOS web app. I can't for the life of me figure out how to disable autocorrect/autocapitalize/spellcheck on a pre element. My HTML looks like this.
<pre id="codePre" class="prettyprint" contenteditable="true" > Some test to edit </pre>
Setting autococorrect/autocapitalize/spellcheck attributes has NO effect (these seem to be only for form and input elements). Are there any ways to go about this at the html level or using objective C (like acting directly on the UIWebView or otherwise)? Are there user defaults I can set that would kill this unneeded 'feature'?
This question is a tad long, but it might help to have at least 1 proposed solution. Try adding autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" to any element where you don't want auto-correct turned on. Works on the latest Chrome and Firefox, unsure about Mobile Safari.
I have updated it. let me make it more clear
<input type="text" value='<div>hello</div><strong>'/>good day
what I have got
input box having default value as <div>hello</div><strong> inside it and the text following the input good day does not inherit the strong tag it looks normal font size and it is not interpreted by browser and this is what i want.
http://jsfiddle.net/UrGpC/3/ This is what i really want to be but does it work in all browsers ?
The browser does not treat the html tags which are inside the input value as the normal flow of html tags from my experiment or does it interpret them ?
You should try and see, it doesn't interpret it as an element, it get rendered as plain text, try loading jQuery and change it thru it:
$('#test').html("ok");
http://jsfiddle.net/nd87/UrGpC/
Next time you should Test it and explain what you have tried
Well you can try this:
<input type="text" value="<div>hello</div><strong>" />
PD: You forgot to close the value atributte :P
EDIT:
It's works for me, is so strange... Anyway if it doesn't work you can try & lt; and & gt; method.
<div>hello</div>
As Wesley Murch said. ;)
I tried to do this recently, but gave up. According to this: http://www.w3.org/TR/html4/interact/forms.html#adef-value-INPUT, input value is CDATA, which seems to mean basically only ordinary characters can be included. http://en.wikipedia.org/wiki/CDATA
I tried this in Chrome. Having a textarea with a lot of text inside, editing the parts at the end become super slow. The cursor and the keyboard input response comes to a crawl.
But if I make it so that the CSS links are moved from the <head> to after </body> it not longer becomes slow. Any ideas why this phenomenon exists?
Code used:
<!DOCTYPE html>
<html>
<head>
<style>textarea {width: 400px; height: 400px;}</style>
<link href="1.css" rel="stylesheet" type="text/css">
</head>
<body>
<textarea name="content"></textarea>
</body>
</html>
This html is actually generated by backend scripts, which will fill the content of the textarea with thousands of lines of text. When the user scrolls down to the end of the content, that's where the slowness begins. If the css at the head area is removed, it will be fast.
Set spellcheck to false:
<textarea spellcheck="false"></textarea>
It might help.
By Augustin suggestion, you can also try adding these guys:
<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
I stumbled also over this issue, in my case only chromium browser is affected.
-> https://code.google.com/p/chromium/issues/detail?id=237433
I had the same problem, but I solved it with the next attribute ng-model-options="{ updateOn: 'blur' }"
try with
<textarea ng-model-options="{ updateOn: 'blur' }"></textarea>
Without seeing a live example, it's difficult to say. But a couple of possible reasons:
You're using custom fonts in the textarea (font-face? SIFr?) which is slowing the browser down due to the additional overheads required. Particularly if you're using something like SIFr!
A validation issue: is your HTML/CSS valid? Try running it through the W3 validations: (HTML, CSS).
Are you using JavaScript on the page? Perhaps some validation or other process that might be triggered by using the textarea?
My gut expectation would be that it's one of the last two points above, to try and help trouble-shoot, try:
Running your markup through the validators and resolving any issues raised. Does it still do it?
Disable JavaScript and load the page. Does it still do it?
I expect you will be able to narrow down the reason very quickly then.
PS: don't put the CSS anywhere but in the head - that will cause you all sorts of other problems!
If the problem only occurs in Chrome, it could be the spellchecker.
According to the link provided by #PapaKai, disabling the spell checker might help. (recently suggested)
You can disable spellchecking on just the textarea with <textarea spellcheck="false"> as explained in this answer