Develop Reference

How to prevent auto focus on text elements when they become visible?

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>

Input text selection not working properly on double-click

When double-clicking on a html page most browsers select the word you double-click on (or the paragraph you triple-click on). But it is not working properly on my html page specially for input field.

<input type="text" class="abc" id="abc" name="xyz" ondblclick="this.select()" value="">
you can Selet the value of input field by using ondblclick="this.select()"

HTML5 required hidden file field - feedback location

I have a hidden file field that is styled via button and text field:
<input class="form-control" disabled="true" id="qsd_filename" placeholder="Upload a file to submit. Limit: 512 kb" type="text">
<input id="qsd_upload" name="dr[etq[]][eta][file]" required="required" type="file">
<span class="input-group-btn right-btn">
<a class="btn btn-primary left-btn browse-button" id="qsd_link">Browse</a>
</span>
The javascript I have (which works) will change the filename text field when hidden upload is triggered by the link.
My issue is the "required" part of this. If I require the hidden file field, it will prevent the submission as desired, but it will create feedback up at the top left corner of the screen. If I make the text field required, it does nothing.
How do I get a hidden file field to have its feedback near it?

Not perfect, but a pretty good answer (thanks to #MVP), just changed the file field style to:
visibility: hidden
height: 0;
width: 0;
The downside to this is the feedback is not quite in the right spot, but it is much closer.

Keybord events are not working in text boxes of an iframe inside Flex application

I have a text box in an iframe which is included in a Flex application.
My keyboard events are not getting triggered while i am typing in the text box like Home,End ,Up down arrows..
<input id="addressSearch" type="text" placeholder="Search Location" >
Please help me to get resolved this issue.

Customizing the appearance of a file input in an HTML form

I've been trying to figure out how to customize the appearance of a file input in an HTML form so that the button will match with the rest of the buttons on my site. Looking around here I found a solution that I would expect to work, but it's having some strange behavior.
I took my file input and set display:none, and created a new text input and button within the form.
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()">
<input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(50 characters remaining)</p>
<input type="file" id="ImageFile" name="ImageFile" style="display:none;" />
<input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" />
<button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button>
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(image to represent your entry, jpg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
Make my entry private.
<button id="new-entry-save">save</button>
</form>
Then my javascript to handle the ImageFileButton button being clicked:
function HandleFileButtonClick() {
document.getElementById("ImageFile").click();
document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value;
}
It appears to work fine. I click the button, the window pops up for me to select a file. When I select a file, it appears in the text box.
The weird behavior comes when I hit the save button on the form. I noticed that it has to be clicked twice to actually submit for some reason now. And, when it submits it is no longer posting the file.
So I made the file input visible again to see what was happening. If I use the ImageFileButton button to select a file, the file shows up in the file input. But when save is clicked, the file input clears and the form doesn't submit. You then have to click again to submit, and of course now there is no file.
Anybody know what is happening here?

No, its not possible. File inputs are generally browser dependant. You might have to use JavaScript replacement or Flash replacement like uploadify.
Article: Input File
Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.