I've build a form with Zend Form, and would like the focus to be on a text area inside the form on page load. I tried with JS, sometimes it shows the focus for half a second, but it removes the focus before one can actually type anything.
I thought Zend Form may prevents the focus, so i looked it up, and found the autofocus attrib-option, but that won't help either.
Any idea what the matter may be?
Thanks
autofocus seems to work fine, however it is not supported in IE. So you're likely stuck with javascript for now.
I tested autofocus in firefox and IE using:
$element->setAttrib('autofocus', 'autofucus');
it work well in firefox with 2 doctypes. HTML5 and XHTML1.0
I haven't tried it in this context but putting the HTML5 shim in your header seems to make IE behave much better.
<!--[if IE]><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
If you have used dojo getFocusOnLoad() might help to set the focus when the a page loads..
Please follow these links:
http://framework.zend.com/manual/en/zend.dojo.form.html
http://framework.zend.com/manual/en/zend.view.helpers.html
Related
I have a web application that was running fine for the last five years till the upgrade of Google Chrome to the latest version 79.0.3945. All forms are loaded in an iframe and focus is set on the first field of the form using autofocus="true". But after the upgrade of Google Chrome, the first field of the form is not receiving focus. Have anyone any clue about it or some solution. Please note that if the form is not loaded in an <iframe>, autofocus="true" works fine.
Sounds like yet another bug introduced into Chromium! You can check the issues page to find and follow the issue or report it yourself, under...
https://bugs.chromium.org/p/chromium/issues/list
And until a fix is found you may want to use a little javascript for a temp fix like this...
Your_Frame_ID.contentWindow.document.forms[0].elements[0].focus();
I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here
I have an html web app and I want the keyboard to open when I load my page,
I've tried:
<textarea class="form-control" autofocus="autofocus"></textarea>
but all that does is focus the textarea and makes it show up once I touch the page, rather then just automatically on page load.
I heard that it was impossible to do this without some type of user interaction in JavaScript alone.
If this is true, are there any plugins out there that might do this?
Hope this makes sense, thanks!
Unfortunately, autofocus isn't supported by mobile Safari due to usability reasons. I've seen people try different work arounds, including simulating a click/focus on the element in question. I've never been able to get it to work though, on mobile Safari at least.
$(function(){
$('#my-textarea').focus().click();
})
Does anyone know why this doesn't work in IE6?:
<noscript>This requires javascript</noscript>
It seems simply enough, but unlike FF, IE6 doesn't show it when I disable javascript.
It's really confusing :( I thought the tag was supposedly compatible acrosss browsers? Well, atleats from the W3 profile page for the tag. (http://www.w3schools.com/tags/tag_noscript.asp)
Any help would be great!
Fiton
Unlike, say, Firefox, you have to restart IE after disabling javascript for javascript to actually be disabled. If you did that but are still not seeing your noscript contents, please explain the exact steps you're taking to disable javascript.
we have an issue where a disabled form element (input, textarea, ...) does not react to a right-click action (oncontextmenu attribute). Everything works fine when the form element is enabled. Please consider the following pseudo-code:
<div id="test" oncontextmenu="someFunction()">
<input id="textbox" type="text" disabled="disabled">
SOME_PADDING
<input id="calendar" type="image" disabled="disabled">
</div>
The real catch is it does not work in Chrome and Firefox, but it does work in IE8 and Opera.
When we right-click on the textbox or calendar elements in Chrome or Firefox, nothing happens. If we click in between the elements (SOME_PADDING) then the right-click menu does appear.
Hence it seems as if a right-click action on a disabled form does not work in Chrome and Firefox. Has anyone experienced a similar behaviour before?
Thanks in advance!
Stijn
EDIT: As mentioned by Pekka, a disabled form element not reacting to a right-click does make sense. The real issue seems to be the oncontextmenu attribute of the div around it not reacting properly when clicking on a disabled form element in Firefox / Chrome.
EDIT2: Online example can be found here: http://jsbin.com/isite4/6 - This works in all but IE8. Any proposed work-arounds to force IE to behave normally?
Hmmmm, interesting. Never seen this before. It could be argued that it is not entirely wrong to hide the context menu, though. The W3C has the following to say about disabled controls:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successful.
and about receiving focus:
In an HTML document, an element must receive focus from the user in order to become active and perform its tasks.
So the behaviour shown by Chrome and FF kind of makes sense IMO.
Ideas for how to work around it:
Put a transparent element on top of the input element, and catch the event there (yuck)
Use z-index: -1 to put the disabled element behind the container - not sure whether this works across browsers though
Do not work with the disabled attribute, but use CSS styling and a jQuery workaround to prevent those controls' values from being submitted
The latter would be the best suggestion, I think.
We opted for a work-around, as their doesn't seem to be a straight-forward approach.
We decided to add an image over the disabled form element, that responds to a normal left-click.
There is a simpler way that I have used and that was to readonly the element instead of disabling it. If the 'look' might confuse your users, just match the "disabled" colours with css on the element. I know it is not relevant to the original poster but anyone else who comes looking might benefit.