Just ran into this recently and I thought it'd be helpful to share.
The HTML <label> element is supported in a weird way by iPhone's (v3) browser. Try this:
<input type="checkbox" id="chkTest" /><label for="chkTest">Click me!</label>
Tapping the "Click me!" label has no effect, the checkbox is not checked.
Lack of support in a touch device for <label> elements puzzled me and I tried to overcome this issue by using javascript. The surprise came when a I noticed a void javascript like the one below also did the trick:
<input type="checkbox" id="chkTest" /><label for="chkTest" onclick="javascript:void(0);">Click me!</label>
HTH
Further info:
Also works with an empty handler: onclick=""
Disabling JavaScript inactivates again the label, even if using the empty handler.
After a bit of experimentation it looks like assigning the following CSS rule to is enough to trigger the expected label behaviour on the iPhone:
label {cursor: pointer}
Related
When I'm focus on an input field on an iPhone, the Shift key is turned on to make sure that the input starts with upper case. Is there a way to turn off this functionality and not have the Shift key when I focus on a field?
I understand why this might be good in some cases but in my case this is a user name or email field, most of which don't start with upper case letter.
Update: The answer lead me to Safari Web Content Guide page which I'll be referencing more often from now on.
You can solve it by setting autocapitalize as off
<input type="text" name="test1" autocapitalize="off"/>
and also Set the autocorrect attribute of your textbox as off to turn off the auto correct feature.
<input type="text" name="test1" autocorrect="off"/>
There is a proprietary attribute for that: autocapitalize (on/off)
<input type="email" name="username" autocapitalize="off">
Please note that this is not a W3C standard and will result in invalid code.
I'm implementing my own autocompletion on an <input> field inside a UIWebView, and the built-in keyboard autocompletion interferes with the user experience. Is there a way to use HTML or Javascript to signal to iOS that it shouldn't try to autocomplete?
In my comments I mentioned using the html attribute autocomplete but I tested it, and it doesn't address your issue. However, there is an attribute specific to Mobile Safari which may help. You could try turning off autocorrect like so:
<input type="text" id="your-field" autocorrect="off" />
Hello
I got similar to that code
<form method="post" action="/" name="form" autocomplete="off">
<input type="text" name="title" />
<textarea name="body"></textarea>
<input type="text" name="tags" />
<input type="submit" name="submit" value="Send" />
</form>
Where the "textarea" is tinyMCE... problem comes when I try to move selection through input and textarea items.
When the page is loaded it focus input[name=text] but when I press Tab key it select input[name=tags] instead textarea[name=body] (which is next)
Can you assist me with that issue ?
This is impossible with conventional tab indexes as TinyMCE actually hides the <textarea> and creates an <iframe> with the editor in it. You could make a work around by forcing focus on the editor in the blur event of the previous element in javascript, here is ajQuery snipped of the top of my head:
$('#prev-input').blur(function(){
tinyMCE.get('textarea').focus();
});
Then as soon as the user leaves the previous input focus would jump to the TinyMCE editor, you could possibly add a blur() method as well to got to the next element.
I resolved this with adding 'tabfocus' to plugins and then add tabfocus_elements : ":prev,:next"
http://tinymce.moxiecode.com/wiki.php/Plugin:tabfocus
http://tinymce.moxiecode.com/wiki.php/tabfocus_elements
There is a plugin solved it
http://sourceforge.net/tracker/index.php?func=detail&aid=1657397&group_id=103281&atid=738747
I known it from TinyMCE forum
http://tinymce.moxiecode.com/forum/viewtopic.php?id=813
I needed a custom tabbing order from another element on the page. The code I used to resolve this in IE11 was
var button = $('#btn-id');
button.on('keydown', function (e) {
if ((e.which === 9 && !e.shiftKey)) {
e.preventDefault();
$(tinyMCE.get()[0].contentWindow).focus();
}
});
Be aware that the above code will only work if you've only got one editor on the page. Otherwise you'll have to cycle through the array returned by tinyMCE.get() to find the correct editor to set focus to.
I found out that the focus event is being triggered but focussing in the element (container) didn't work all the time.
In my case I tabbed from editor 1 - 4 and when I shift+tab I lost focus on the instance.
To fix this I added the following to the setup event of tinyMCE
setup: function(editor) {
editor.on("focus", function(e) {
e.target.editorContainer.scrollIntoView();
});
}
This is a quite simple issue to describe. This was tested on Firefox (3.6), IE (8) and Chrome (8).
Here is the file doesnotsubmit.html
<form>
<input />
<input />
</form>
When the focus is on one of the input and you press enter, nothing happens.
Below is the file doessubmit.html
<form>
<input />
</form>
When the focus is on the input and you press enter, the form is submitted.
Any insight on this inconsistent behavior ?
I know the form lacks a submit button, and thus is not semantically correct. Anyway, the submit process was meant to automatically be handled through jQuery dialogs buttonpane's buttons, and I wouldn't know how to place an additional <input type="submit" />.
user754151 is correct. This is a known bug but i guess you can get rid of it just intercepting the enter keypress event.
There are two possible solution for this issue.
The simplest solution is to add 1 more input field which will not visible to user.
you can bind the keydown event of that input field, and in that function just check keyCode == 13 then preventDefault().
I was wondering if anyone has seen this issue before.
I have two button on a webpage. When I navigate away from the page and hit the back button to return the value of one button is placed in the value of the other.
E.g
<input class="SmallData" type="submit" id="logButton" value="Log In" tabindex="93"></input>
<input class="btn" type="submit" id="acBtn" value="Detailed Quote"></input>
When I come back to the page Detailed Quote replaces Log In e.g.
<input class="SmallData" type="submit" id="logButton" value="Detailed Quote" tabindex="93"></input>
There is no JavaScript causing this to happen. I look at the source everything looks fine but I inspect the DOM I can see that the there is a different value.
Is there something about how web kit handles the dom that it gets corrupted when the back button is used?
Thanks,
Try giving each input element a name="some_unique_name" attribute -- see if that helps Safari differentiate.
Mght it be because of having two submit buttons...?
Just my "random" suggestion though... :)
Check if the same thing happens in Chrome (if you have access to a Windows box) to see if it's a WebKit issue or Safari itself.