I have an html <dialog> tag with a text field in it. But when the dialog is opened the text field immediately gains focus. Which is fine on desktop devices, but on mobile this causes the virtual keyboard to pop up.
Is there a way to prevent the text field from gaining focus? Note that I'd still like the user to be able to focus after the dialog has become visible.
<dialog id="myDialog">
Say something nice:
<input type="text">
</dialog>
<button onclick="myDialog.showModal()">Open</button>
Seems like one way to do this is to make the text field disabled and then enable it again once the dialog is visible. Not sure if there's a more elegant way than this.
<dialog id="myDialog">
Say something nice:
<input id="text" type="text" disabled>
</dialog>
<button onclick="myDialog.showModal(); text.disabled = false;">Open</button>
Related
Trying to build a simple HTML/JS chat functionality and when a user selects "submit" the message is sent and the focus is on the text input, cleared. However, the autocomplete remains from the last word (on mobile). I want the autocomplete feature but need it to CLEAR on submit and reset.
<!DOCTYPE html>
<html>
<body>
<h1>The autocomplete remians on reset</h1>
<form>
<input type="text" id="message" name="message" ><br><br>
<input type="reset" onclick="myFunction()">
</form>
<script>
function myFunction() {
document.getElementById("message").value ='';
document.getElementById("message").focus();
}
</script>
</body>
</html>
After much searching, I think the answer is YOU CANNOT DO IT programmatically. It appears that on mobile, iPhone at least, ONLY the user keyboard commands like RETURN or Backspace can affect the autocomplete. I solved the issue by hiding the button on Mobile and forcing the user to use the keyboard. So basically NO reset button on mobile.
I have the following HTML form:
<form>
<input type="text" id="input1">
<input type="text">
<button>Submit</button>
</form>
I want to set the focus on #input1 when I blur on the Submit button. Here is the JS that I have:
document.querySelector('button').onblur = function() {
console.log('blurred');
document.querySelector('#input1').focus();
};
I can see the console.log happening, but for some reason the focus isn't being set on #input1.
Try it here: https://jsbin.com/gukocuyada/1/edit?html,js,console,output
Thanks in advance!
Since the <button> is the last focusable element on the page, when you out of it, the browser will override the .onblur handler and simply move the focus to the URL bar. This seems to be built in to most browsers (at least Chrome and Firefox).
You can confirm this by adding another <input> field after the <button> and you will see that hitting does indeed focus on the first <input> field.
You can kludge your way around that default browser behavior by adding a fake input field at the end:
<input style="width: 0px; height: 0px; border: none;" onclick="document.querySelector('#input1').focus();">
I want a button to be disabled unless text is present in a textarea. Here is what I have tried:
<textarea ng-model="shipment_ids"></textarea>
<button ng-click="do_something" ng-disabled="shipment_ids.length"></button>
However, the button is enabled no matter what.
I think you want the opposite of what your code states. Something like:
<textarea ng-model="shipment_ids"></textarea>
<button ng-click="do_something" ng-disabled="!shipment_ids">Click me</button>
Example on JSFiddle here.
I have a form with text input + gradient-shaded button with onclick='this.form.submit()' (plus some hidden inputs).
In all browsers, clicking on the button works.
In Firefox, if I click Enter while in text input, it submits the form.
In IE, it does nothing.
How can I make it work with IE?
If I remember correctly IE likes having an actual submit button, whether that's an <input type="submit" /> or <button type="submit">submit me</button>. Maybe you can put that in there but "out of sight" so you don't see it..
Create an empty text box, with a style of "visibility:hidden;display:none", this is a known issue
This type of form will always work with "Enter":
<form ...>
...
<input type="submit" ...>
</form>
Make sure you have an input of type submit.
I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields. The fields are populated with default values, but in many cases the user will wish to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out. Here's a pared down example of what I have:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here). In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field. If I replace the select with a simple focus, like
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want. I want the user to be able to start typing right away to replace the default value.
Anyone have any ideas?
Thanks.
Focus, then select.
Also consider putting the code in a script block directly after the input in question. If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>
Try setting the tab order of the fields using tabindex:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>