When I create websites with input fields and I view them on an iphone, the default keyboard always pops up in spite of the fact that I use a third-party keyboard called swype as my default keyboard. Is there a certain attribute I need to put in my input tag so that it allows third-party keyboards? If not, how would I allow them? Let me know. Thank you in advance for any help.
<div id="project-input" class="col-sm-6">
<input id="project-name" type="text" class="form-control" placeholder="Title Your Project">
</div> <!--col-sm-6 -->
Related
I am trying to use Mat-keyboard but the focus on input changes when I click the keyboard. Please see the image below -
displayed view of my keyboard
<form ngForm="myForm">
<mat-form-field>
<input matInput placeholder="Code" type="text" name="code">
</mat-form-field>
<mat-keyboard></mat-keyboard>
</form>
I want to achieve something this blog shows on angular 6:
Kindly visit to get more clarity
https://rawgit.com/GreenfieldVentures/angular-on-screen-keyboard/master/demo2.html
Thanks for your help!
You're not supposed to use <mat-keyboard> on it's own - it says so in the docs:
A component used to open as the default keyboard, matching material spec. This should only be used internally by the keyboard service.
Only use it as a directive:
<input matInput matKeyboard placeholder="Code" type="text" name="code">
You can read more on it on the docs site.
If you've ever looked at what ASP.NET MVC actually renders when you use #Html.CheckBoxFor, then you've seen that each checkbox you request to be rendered actually results in the emission of not one but two input tags. One is the "true" value checkbox, and the other is for "false." The latter input is of type "hidden".
Generally this doesn't cause problems if you're using ASP.NET MVC correctly. You wouldn't notice the input doubling unless you tried to, for example, do something directly with Request.Form(e.g. Why does ASP.NET MVC Html.CheckBox output two INPUTs with the same name?)
My question, though, is how screen readers deal with this. For example, can they be relied upon to correctly report only the visible checkbox to the site user?
Screen readers will ignore hidden inputs.
Given the example you cite in your comment, it returns this code:
<div class="col pure-u-xl-1-3 pure-u-lg-1-3 pure-u-md-1 pure-u-sm-1 pure-u-xs-1">
<label>Home Club Newsletter</label>
<input checked="checked" … id="newsletter" name="JoinHomeClub" type="checkbox" value="true">
<input name="JoinHomeClub" type="hidden" value="false">
<span class="checkbox-label">Yes, please sign me Up!</span>
</div>
Right off the bat there is a problem here because the <label> is not associated with the control, and the visible text that is next to the checkbox is not associated with the field.
When I access the field in NVDA, all it says is "checkbox checked". There is no accessible name at all.
But to your question…
Your question was related to the <input type="hidden">. As #SLaks said, screen readers ignore <input type="hidden">. The fact that they have the same name value is no problem. If they had the same id value, then you would have a problem (how it would manifest in a screen reader depends on things and stuff).
I have some HTML for a Checkbox im trying to click:
<td class="surface center">
<div class="checkbox-inline checkbox-inline--empty">
<input type="hidden" value="0" name="stuff_check">
<input id="stuff_1" class="boolean optional" type="checkbox" name="stuff_1_checked" value="1" data-item="5">
<label class="optional" for="stuff_1">Checked</label>
</div>
</td>
When running a page.find_by_id('id').trigger('click') it does indeed work, just using click however it complains about Poltergeist possibly clicking another elements:
Capybara::Poltergeist::MouseEventFailed:
Firing a click at co-ordinates [-9468.5, 6] failed. Poltergeist detected another element with CSS selector '' at this position. It may
be overlapping the element you are trying to interact with. If you
don't care about overlapping elements, try using
node.trigger('click').
However I felt maybe this is because of it being set as "hidden", so I tried doing page.find_by_id('ID', :visible => false).click however it gave the same issue.
Any suggestions? Since I know using trigger.('click') isn't advised.
There is no way to do a proper click on a hidden element because there would be no way for a user to click on an element that doesn't appear on the screen.
Your example is confusing because the hidden element doesn't have the same name attribute as the checkbox element which is what I would normally expect in this kind of setup. Assuming that what you're really trying to do is check the "stuff_1" checkbox (and that is hidden via CSS) then you should be doing what a user of your app would have to do - click on the label.
page.find('label[for="stuff1"]').click
Try
within('.checkbox-inline checkbox-inline--empty') do
check('#stuff_1')
end
I really recommend using Pry to do this though as you'll save yourself a ton of pain finding which elements are where.
Hy
What i want to do is to create a custom renderer for will_paginate which renders first, previous, next and last page and a input field where the user can type in the page number manually. I already have the links for first, last etc. but i stuck at the input field. I could create a form in the view but the input field has to be rendered between the previous and next links.
Does anyone know how to do this?
Thanks for your help
You can do this as a separate form (make sure it is a GET). All you
need is the one input element named page. Something as simple as this
should work (not all browsers may like the #). I dropped it into a
site I'm playing with now and it worked. Put it anywhere on your page.
You might have to make something more complicated if you need to
incorporate search terms.
<form action="#" method="get">
Go to page: <input type="text" name="page" value="" size="2"
maxlength="4" />
<input type="submit" name="btnSubmit" />
</form>
I'm writing a web application for iPad.
I know it's possible to change the type of keyboard displayed when an html input field is selected using:
Text: <input type="text" />
Telephone: <input type="tel" />
URL: <input type="url" />
Email: <input type="email" />
Zip Code: <input type="text" pattern="[0-9]*" />
the problem is that I have to use textarea instead of input. Is it possible to obtain the same result?
If not : is there any way to change the keyboard label for the ENTER key. At the moment the default label is "Return" and I would like to have "Send" (since it's a chat app).
thanks a lot!
If it is plain html/css/javascript. This is not possible
if you use <input title="Search"> the "enter" key is replaced by a "search" button, I haven't been able to find a listing of all the different combinations, but I'm sure there is one to you liking.
Note: The input must be inside a form element for this to work.