Getting Search Keyboard on iPhone using PhoneGap - javascript

I have created a search field on a mobile app i am creating via PhoneGap. I've tried using with no luck. I also know that i could get around the visual aspect of the input field via CSS & Javascript, however how do i get the Keyboard to have a "SEARCH" button on the bottom right instead of it saying "RETURN"

Use
<form> ...
<input type="search" /> ...
</form>
The <form> is a must.
(See also http://groups.google.com/group/phonegap/browse_thread/thread/bca19709dbdf2e24/eb312d0607102395?lnk=raot)

The following are supported in mobile safari, and therefore PhoneGap since iPhone OS 3.1
Text: <input type="text" />
Telephone: <input type="tel" />
URL: <input type="url" />
Email: <input type="email" />
Zip Code: <input type="text" pattern="[0-9]*" />
Search is not supported as an input type, and would require considerable native work to make happen in PhoneGap.
See here for details: https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

Update:
The following input type works as expected:
There are some important things that you have to keep in mind:
It only works on iPhone OS 3.1 +
The input tag MUST be inside a tag.
Also, it is worth noting the following tags as well:
<!-- display a telephone keypad -->
<label for="tiTel">Telephone:</label>
<input type="tel" id="tiTel"/>
<br/>
<!-- display a URL keyboard -->
<label for="tiUrl">URL:</label>
<input type="url" id="tiUrl"/>
<br/>
<!-- display an email keyboard -->
<label for="tiEmail">Email:</label>
<input type="email" id="tiEmail"/>
<br/>
<!-- display a numeric keyboard -->
<label for="tiZip">Zip Code:</label>
<input type="text" pattern="[0-9]*" id="tiZip"/>
<br/>

Related

Any way to use JavaScript to *not* set focus on any HTML element?

I have a mobile signup form that contains HTML input elements for the user's username, password, and password confirmation fields. Since this is a mobile web app and I'm trying to conserve screen space, I've elected to forego putting HTML labels above each of these elements and instead utilize placeholder attributes to signal what to enter in each field:.
<input id="id_username" placeholder="Choose a username" type="text" />
<input id="id_password1" name="password1" placeholder="Choose a password" type="password" />
<input id="id_password2" name="password2" placeholder="Confirm password" type="password" />
Initially I added a bit of JavaScript to put the focus on the username field when the user arrives at the page:
<script type="text/javascript">
document.getElementById("id_username").focus()
</script>
This worked fine except that in older versions of the default Android browser, this causes the placeholder to disappear. Since the lack of a placeholder (and label) may cause the user to not be clear on what to enter in that field, I took the JavaScript out. However, even without that JS, I'm noticing that the Android browser still puts the focus in that first form field which again deletes the label. Is there any way that I can code the page so that I'm guaranteed that no browser (including the default Android browser) will put focus on any of these fields? Techniques that wouldn't require additional libraries would be preferable as I'm trying to keep my page size and additional requests to a minimum.
Thanks.
Sometimes it is faster to write some simple functionality by your hands. Look at the example at js fiddle. If you want you can replace jquery with native javascript.
https://jsfiddle.net/ShinShil/y7o8mrwh/2/
var placeholder = 'enter something';
$(document).ready(function() {
$('.placeholder').val(placeholder);
$('.placeholder').focusin(function() {
if($(this).val() == placeholder && $(this).hasClass('opacity')) {
$(this).val('');
$(this).removeClass('opacity');
}
});
$('.placeholder').focusout(function() {
if($(this).val() == '') {
$(this).val(placeholder);
$(this).addClass('opacity');
}
});
});
If your controls are in forms, you can loop over all controls in all forms and call their blur method:
function blurAll() {
[].forEach.call(document.forms, function(form) {
[].forEach.call(form.elements, function(element) {
element.blur();
});
});
}
<body onload="blurAll()">
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
</body>
Note that for IE8 you'll need a polyfill for Array.prototype.forEach.
Edit
Perhaps a simpler solution is to use document.activeElement:
function blurActive() {
if (document.activeElement && document.activeElement.blur) {
document.activeElement.blur();
}
}
<body onload="blurActive()">
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<p>Click on the button, then on an input to give it focus. It will be blurred in 5 seconds.</p>
<button onclick="setTimeout(blurActive,5000);">Blur active in 5 seconds</button>
</body>

is there any plugin or script where we can support all HTML 5 input type fields? Please suggest

Is there a way to support all (HTML5 from fields with javascript or
jquery) with all standard browsers and devices?
Fields examples:
<input type="search">
<input type="date">
<input type="email">
<input type="url">
<input type="number">
<input type="range">
<input type="time">
<input type="color">
<input type="tel">
Yes, there is.
For email, number, tel, url use Mask plugin
For date, time use Date plugin
For range use Range plugin

Polymer with javascript

I'm trying to control my polymer text box with input type text, this textbox is being used to receive a users Phone number
<paper-input
name="phone"
id="phone"
value="{{Request::old('phone')}}"
label="Phone Number"
aria-disabled="false"
class="x-scope paper-input-0"
style="text-align: left"
required auto-validate error-message="Phone Number cannot be Blank!">
<!--Text area to obtain phone number -->
<input type="text" is="iron-input" min="10" maxlength="10" size="10"/>
</paper-input>
what i'm trying to do with this is actually use javascript with polymer to limit this text box input to simply just numbers with a minimum input requirement set by me.
I had a couple of rough attempts at it but i'm fairly new to polymer so none of the approaches i took worked.
any tips would help !
thank you !!
<paper-input> is not designed to wrap a regular <input /> element. You would use <paper-input-container> for that.
In your case, use the paper input to limit characters directly:
<paper-input
name="phone"
id="phone"
value="{{Request::old('phone')}}"
label="Phone Number"
aria-disabled="false"
class="x-scope paper-input-0"
style="text-align: left"
required auto-validate error-message="Phone Number cannot be Blank!"
minlength="10"
maxlength="10"
size="10">
</paper-input>

Angular ng-pattern causes binding to break

I've got a form:
<div class="panel-group">
<label for="url" tooltip="Enter the Engine as a Web Service (EWS) URL the Empower Editor will use for PDF preview.">EWS URL</label>
<input id="url" size="50" ng-model="config.ewsUrl" required ><br/>
<label for="PreviewTimeout" tooltip="Specify how long the Empower Editor will wait for a response from the PDF preview.">Preview timeout (Seconds)</label>
<input id="PreviewTimeout" type="number" min="15" max="60" required ng-model="config.previewTimeout" style="width: 150px;">
</div>
When I add an ng-pattern attribute to the input it breaks the binding:
<div class="panel-group">
<label for="url" tooltip="Enter the Engine as a Web Service (EWS) URL the Empower Editor will use for PDF preview.">EWS URL</label>
<input ng-pattern="/^((ht|f)tp(s?)\\:\\/\\/)?[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*(:(0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\:\\'\\/\\\\\\+=&%\\$#_]*)?$/" id="url" type="url" size="50" ng-model="config.ewsUrl" required><br/>
<label for="PreviewTimeout" tooltip="Specify how long the Empower Editor will wait for a response from the PDF preview.">Preview timeout (Seconds)</label>
<input id="PreviewTimeout" type="number" min="15" max="60" required ng-model="config.previewTimeout" style="width: 150px;">
</div>
If I remove the reg ex, it goes back to binding again. What could cause this?
It looks like you are trying to validate a url. You don't need to use a regular expression or the ng-pattern option for this. Instead just use the following:
<input type="url" id="url" type="url" size="50" ng-model="config.ewsUrl" required/>
That in mind, the real reason that you aren't getting model binding is probably because the regular expression is not validating the values entered (either because it is incorrect or it is not a valid regular expression). I put together a quick plunker demonstrating what happens with valid and invalid values (on a validated field).
See the plunker here.
EDIT - Version Using ng-pattern
If older browser support is important, you will probably still need to also use ng-pattern. In order to do this you need to make sure the regular expression is in the correct format (leading and trailing slash, but no "g"). For an example I pulled a regular expression for url's from here and implemented it in the following code:
<input id="url" type="url" size="50" ng-model="config.workingUrl2"
ng-pattern="/https?:\/\/(www\.)?[-a-zA-Z0-9#:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9#:%_\+.~#?&//=]*)/"
required/>
See this working in the updated plunker! Best of luck!

Submit a form with jQuery / Javascript without ignoring "required" tag

so I have the following form:
<form action="register.php" method="post" id="register-form" name="register-form">
<input type="text" id="username" name="username" placeholder="Username" autofocus="autofocus" required />
<input type="text" id="password" name="password" placeholder="Password" required />
Register
<input type="submit" style="display: none;" />
</form>
What I want to know, is there a way to make jQuery take care of the "required" tag when submitting a form? Right now it doesn't.
Trigger click on the submit button instead.
http://jsfiddle.net/PdUcq/
From this link,
required attribute works in most new browsers. In older browsers its not supported since its part of the HTML5 spec.
If you are looking for cross browser support with jquery you would have to use some plugin. One of the good ones is this plugin.
Or you can go ahead and write your own custom validators, but why re-invent the wheel.

Categories