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.
Related
I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!
As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.
I am currently following this tutorial to have a file picker functionality.
http://www.alecjacobson.com/weblog/?p=1645
I would like to add wai-aria attribute for "choose file" part to make it readable. I have tried to use aria-controls and tabindex but couldnt get any positive response when i simulate some validators.. Any idea?
<body>
<input id="file" type="file" multiple onchange="startRead()">
<h3>Progress:</h3>
<div style="width:100%;height:20px;border:1px solid black;">
<div id="bar" style="background-color:#45F;width:0px;height:20px;"></div>
</div>
<h3>File contents:</h3>
<pre>
<code id="output">
</code>
</pre>
</body>
I would like to add wai-aria attribute for "choose file" part to make it readable
Can you explain a little more about that?
When using native html (such as <input type="file">), you get a lot of accessibility built in. The browser knows how to surface native html elements through the accessibility API, thus allowing a screen reader to correctly announce the name, role, and value of the element. So it will be "readable" by default.
However, if you are talking about the progress indicator and want the progress of the file upload conveyed as the file is loading, you would have to do that with aria-live. There's a good example on Progress Bar with ARIA Live Regions
Modern browsers identify the file type of input control as one of several different "types" (Label, Input, or a Generic Object) with a button as a pseudo-element attached. But for accessibility purposes I think it is safe to identify it as a button to screen readers as that is interactively how it is used.
So, I would add the following WAI-ARIA attributes to your file type of input controls:
<input id="fileupload" type="file" role="button" aria-label="File Upload" />
If your screen reader community gets confused by that then "role=textbox" would be my second option.
This worked for me, I'm not positive if it's 100% ARIA compliant since the screenreader will use a button in place of the file input. But, based on my testing, this works for both Mac's VoiceOver, and tab navigation.
<label
tabindex="0"
for="fileupload"
role="button"
onkeyup="if (event.keyCode === 13 || event.keyCode === 32) { this.click(); }"
>
Upload an Image
</label>
<input
name="inputname"
type="file"
id="fileupload"
accept="image/jpeg, image/png, image/gif"
aria-hidden="true"
tabindex="-1"
/>
Explanation
tabindex="0" Labels are not normally focusable by tab, this makes it tab-focusable.
role="button" Inform the screenreader to treat this label like a button. Label still works without role, but with role the screenreader can tell the user how to interact with the button.
for="fileupload" This is where the magic happens. If you tab to the button (label) and hit enter, or do the same in a screenreader, for sends that event over to the file input element.
onkeyup This is a convenience thing for tab navigation. By default pressing enter (13) or space (32) will not do anything.
aria-hidden="true" By default, screenreaders will try to focus both the label and the input, which is redundant for the user. Tell the screenreader to ignore the input. Why do this? It makes it easier to add CSS focus states to the label when the screenreader is focusing it. (vs the screenreader focusing the file input, and trying to update the label styling based on the focus state of another element)
tabindex="-1" Tell tab navigation to ignore the <input> as well.
I have a text input field that when double clicked, opens a Text Field Ckeditor Dialog, how would one stop this from happening, either by disabling the dialog itself, or possibly customizing it so it has a message in it for example?
I've looked and debugged into the code to figure out how this dialog is popping up and if i can even customize it but to no avail, any help is appreciated.
Here is the structure of the text area element:
<span class="TextInputWrapper">
<input class="TextInput" style="width:180px;height:26px;font-size:inherit" type="text" value="" id="20131021138501198809822047" data-cke-editable="1" contenteditable="false" data-cke-saved-name="">
</span>
How can I add the linked from page #nodename as a text input value on my form?
The input will disabled, so that the user cannot change the text.
<input type="text" name="jobtitle" id="jobtitle" value="Job Title to be Prefilled here by linked from page #nodeName - Disabled field" disabled="disabled" />
I assume this is razor? Try #Model.Name instead.
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.