I'm looking to use the number_field_tag as it works great on mobile devices to allow the user to input with a 10 Key interface. However, the data that they will be entering on their mobile device may contain sensitive information (i.e., part of their Social Security Number).
How can I mask the inputted data as it is being typed while maintaining the 10 Key interface? By using the password_field_tag, it would revert the keyboard to a standard QWERTY.
Not really ruby-on-rails specific, but you could use this in HTML to get a password input that only accepts digits and shows the numeric keyboard on some mobile devices.
<input type="password" pattern="\d*">
I found a CSS solution that works on my mobile. I can use the webkit option to do this.
input[type=number] {
-webkit-text-security: disc;
}
Or for just a particular class as well.
.employee {
-webkit-text-security: disc;
}
Works on Galaxy S4 and Chrome so far with what I've tested.
Related
iOS Safari automatically converts numbers like 102.0000 or 1,374.1400 to telephone links. The first number, which is inside a <td>, is converted to <td>102.0000</td>, the second, which is also inside a <td>, is converted to <td>"1,"374.1400</td>. Annoying.
In the <head>er I've included the following: <meta name="format-detection” content=”telephone=no" />. It does not work.
Other than perhaps wrapping the decimal point between <span> or <label> tags, or encoding it to ., all hacks I've seen in some sites, is there any other easier way to prevent the automatic conversion of a number (###.####) into a telephone link in iOS?
Thanks.
In our Aurelia app we utilise barcode scanning on various dialogs. So we created a barcode component. When using a barcode scanner for this component we noticed that some characters are lost during scanning. Within the barcode component we utilise an input field to capture the input of the scanning or user typing into the field - on pressing the enter key the component sends an event containing the barcode - which the dialog intercepts and does some work.
I attempted to get this component to fail in the aurelia skeleton-navigation app (on github "skeleton-navigation\skeleton-typescript") as it does in our application however it works consistently - that is no characters are being lost.
I then went back to our app. If I reduce the barcode component to just a simple input field as below it also fails. If I take out the value.bind or value.two-way the input field has no loss of characters.
<input type="text" value.bind="barcodeValue1"/>
<input type="text" value.two-way="barcodeValue2"/>
There are many difference is the package.json file for example our app is using:
"aurelia-framework": "npm:aurelia-framework#^1.0.0-rc.1.0.2".
aurelia-skeleton is using:
"aurelia-framework": "npm:aurelia-framework#^1.0.0"
There is one solution we can see and that is to introduce a delay on the scanner between characters however we would like the binding to work and were also thinking it may be a bug in Aurelia. We are currently re-writing the component NOT to use the binding ability. The problem in our application occurs in Internet Explorer and works fine in Google Chrome.
This is probably a bug in IE. I believe this problem can be solved by changing the updateTrigger to 'change'
<input type="text" value.bind="barcodeValue1 & updateTrigger:'change'"/>
You can also try debounce
<input type="text" value.bind="barcodeValue1 & debounce">
http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-binding-behaviors/1
Make sure your scanner is pressing "enter" or "tab" after typing the code.
The best iOS keyboard for entering USD currency values (pictured below) includes numbers 0-9, the decimal symbol, the comma symbol, and the dollar sign. As far as I know, the only way to get this keyboard on Mobile Safari is to use <input type="number">.
Unfortunately, iOS currently has built-in validation for the number input type which screens out commas and dollar symbols. Since this validation "feature" is embedded in the browser and Mobile Safari hasn't yet implemented the novalidate directive, there is currently no way to do this validation manually.
Using <input type="text"> would obviously solve the validation problem, but it also would bring up the regular alpha keyboard, which is not acceptable for my current project (a financial calculator).
I'm on the verge of doing something crazy, like using JavaScript to quickly switch the type from number to text after the input receives focus. I'm grasping at straws here. Any ideas?
For now, JavaScript is the only solution. Here's the simplest way to do it (using jQuery):
HTML
<input type="text">
JavaScript
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.
You can use the attribute pattern for your input field as text. This instructs mobile safari to bring up the numeric keyboard. Try something along the lines of:
<input type="text" pattern="\d*" />
Just change your pattern regex to what you want.
Here is more information on the pattern attribute
UPDATE
After reading Apple's Documentation on managing Text in Webviews it seems like you are out of luck. You will have to do some javascript magic to do what you want.
As can be seen here, Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications.
It's actually very useful including autocapitalize in the 'email' and 'website' fields in forms, as there's nothing so annoying as having to unselect the SHIFT key when filling in either of those two inputs. Doing this is trivial as all you need to do is add the autocapitalize=off attribute to the corresponding input, e.g.:
<label for="email">E-mail</label>
<input type="email" name="email" placeholder="yourname#domain.com" autocapitalize="off" title="Enter your e-mail address" class="required email" id="email">
Both the iPhone and the iPad perfectly match keyboards to the attributes attached to the input element in forms. Unfortunately, this markup seems to break validation, with W3C responding with 'Attribute autocapitalize not allowed on element input at this point' when the above is set.
I suppose this isn't something to die for, but is there a way of including the attributes without breaking validation? Maybe I've got something wrong here.
The comment by ughoavgfhw fully answers the question: as W3C specs stand at present, you can't include the autocapitalize attribute in your forms without breaking validation, so it's a case of weighing that inconvenience against that of users having to fumble through your forms clicking on the SHIFTkey on iOS.
I think this is one of those rare cases (inline styles being another) where it makes sense to put up with errors on one page, so long as they aren't symptomatic of anything gone wrong but just of W3C being a bit slow on the uptake.
couldnt you just add a class, to the input element. And reference that class with attribute, text-transform:lowercase ?
I'm setting up an e-mail form and I need to be able to check for bots and filter them quietly. The site runs ASP.NET MVC. I'd like to avoid CAPTCHA. Any ideas?
Add a new input field, label it "Please leave blank", hide it using CSS, and ignore the post if that field is filled in. Something like this:
<style type='text/css'>
#other_email_label, #other_email {
display: none;
}
</style>
...
<form action='mail'>
<label id='other_email_label' for='other_email'>Please leave blank:</label>
<input type='text' name='other_email' id='other_email'>
...
</form>
So a human being won't see that field (unless they have CSS turned off, in which case they'll see the label and leave it blank) but a spam robot will fill it in. Any post with that field populated must be from a spam robot.
(Copied from my answer to this related question: "What is a good invisible captcha?")
IIRF can do blacklisting based on user-agent or IP address (or other things).
Works with ASP.NET, PHP, anything. Runs on IIS5, 6, 7. Fast, easy, free.
You can browse the doc here.
I saw a solution to this with forms, the premise was using JavaScript to count keystrokes and time the distance from page_load to form submission. It then guessed if it was a bot based on that time and a typical expectation boundary for keystrokes/second as bots (that use the browser) tend to dump text very quickly without strokes (just a ctrl-v).
Bots just sending POST or GET data without loading the page just get filtered too.
I don't know the details of the implementation, but might be an idea.