I want to allow only alphabets and spaces to be allowed in ionic input text box.
I tried,
<ion-input type="text" pattern="[a-zA-Z ]+" ng-pattern-restrict></ion-input>
But it is not working.
Related
Good day all
I am building my first ionic 4 mobile application, and have a question about how label, icons and other elements can be connected to a form input.
In normal HTML forms you have a relationship between labels and inputs using the "for" attribute, like so:
<label for="name">Please enter name</label>
<input type="text" id="name" name="name"/>
With this relationship in place the input field gains focus when you either click on the label or on the input itself to gain focus on the input.
In ionic you use ion-label and ion-input instead of the default HTML form elements, and these seem to not share this capability.
I am specifically interested in using an icon as the aforementioned label. I tried the following without any success:
<ion-item>
<ion-label for="searchText">
<ion-icon name="search"></ion-icon> <!--name here refers to the icon displayed-->
</ion-label>
<ion-input id="searchText" name="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
Is there something similar that one can use, or do I need to use JavaScript to achieve this?
Any advice would be greatly appropriated
So since I've been asked for a solution by someone else, let me post the workaround that I used:
I never managed to find a way to automatically add this kind of functionality like in a normal form, I did manage to trigger a click event on the icon that then caller a JavaScript function to give focus to my input field. It looks something like this:
HTML:
<ion-item color="light" class="white-iput" lines="none" (click)="focusSearch()">
<button (click)="focusSearch()" class="icon-button">
<ion-icon name="search" color="primary" for="searchText"></ion-icon>
</button>
<ion-input #input id="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
JS (in my Type Sctipr file):
#ViewChild('input') searchInput: { setFocus: () => void; } ;
...
focusSearch() {
this.searchInput.setFocus();
}
Note that I call the "focusSearch()" function if you click anywhere in the "ion-item" wrapped around the icon and the text box, as I use CSS to have the whole thing display as a single textbox.
Hope this helps!
I am trying to send emoji's from input box once I click enter it's not getting sent in form of emojis it's getting converted into "??".
<ion-input autocomplete="true" spellcheck="true" class='input-cover' type="text" [(ngModel)]="userComment" placeholder="Post a Comment">
</ion-input>
This question already has an answer here:
Icon not displayed inside input line in Ionic 3
(1 answer)
Closed 5 years ago.
In my Ionic2 project when using the floating label, it is not correctly aligned with the input box. How can I fix this?
Following is the code:
<ion-item>
<ion-label floating><ion-icon name="person" item-start></ion-icon>Email</ion-label>
<ion-input type="email" name="email" [(ngModel)]="registerCredentials.email"></ion-input>
</ion-item>
This is not a duplicate question. The one it is compared to is about keeping the label floating and icon fixed. This is an alignment related question.
could you please share the code?
If you use the ion-item and ion-label like this, the text is correctly aligned:
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input></ion-input>
</ion-item>
Input no selected
Input Selected
I've noticed navigating in websites like Dell or Google, that typing in their search text box with iPhone, in the keyboard appears a blue button 'Search' instead of the standard 'Go' button that appears on any normal form.
What should you do to display the search button?
having type="search" is usually all you need to make software Search keyboard appear however in iOS8 it is mandatory to have a wrapping form with action attribute.
So the following code would have a software keyboard with “Return” button
<form>
<input type="search" />
</form>
But this code should have blue “Search” button instead
<form action=".">
<input type="search" />
</form>
You can influence this behaviour with:
<input type="search" />
JS Bin demo
Ignore the submit button's text being 'kettle,' I just wanted to be sure that it wasn't the submit button influencing the text of the iOS keyboard...
This is, of course, backwards compatible since a browser that doesn't understand type="search" will default to type="text", which is useful for creating forward-planning html5 forms.
I was not able to get the search button with
<input type="search" />
However, I did get it to appear with
<form>
<input name="search" />
</form>
On iOS 8 you can enable the blue "Search"-button on the keyboard by doing one of:
add input name=search
add input type=search
add id to input with the case sensitive word "search" in the ID, for
example the-search or thesearchgod
In HTML5 standard, adding enterkeyhint attribute on the input is the proper way to change the label on the virtual keyboard
<input enterkeyhint="search" />
If no enterkeyhint attribute is provided, the user agent might use contextual information from the inputmode, type, or pattern attributes to display a suitable enter key label (or icon).
See MDN Docs about enterkeyhint
When using #Anton Bielousov suggested solution, this also changes the styling of Android Devices. To counter this I had to:
Add form around input.
Add type="search"
Add name containing search
Add styling to counter the unwanted android styling
Android styling:
input[type=search] { -webkit-appearance: none; }
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
<form action="" class="search-bar__form-form">
<input
class="search-bar__input"
name="search-bar"
type="search"
/>
</form>
The keyboard is handled by the operating system (iOS) and cannot be directly altered. The type of input required determines the type of keyboard to display.
If the website in question is HTML5, then #David's answer is valid.
I've searched high & low for an answer on this and I can't seem to find an answer or anybody else having the same issue. Hope some one can assist?
I have a web page for signup which I'm viewing in an iPhone UIWebView. A user is asking if we can stop capitalization on the first letter of the email address being entered. I thought this didn't matter, but apparently it can for the local-part on some email systems (apparently it's only the domain that is only case insensitive).
It seems autocomplete is the culprit.
I've tried adding autocomplete="off" to the input element in the html, but iOS is obviously ignoring it:
Can auto-complete be turned off on a html input text field within a UIWebView?
Thanks
Add autocorrect="off" attribute to your input text field.
Seems like Apple have some documentation now:
Although the UIWebView class does not support the UITextInputTraits
protocol directly, you can configure some keyboard attributes for text
input elements. For example, you can include autocorrect and
auto-capitalization attributes in the definition of an input element
to specify the keyboard’s behaviors, as shown in the following
example.
<input type="text" size="30" autocorrect="off" autocapitalize="off">
You can also control which type of keyboard
is displayed when a user touches a text field in a web page. To
display a telephone keypad, an email keyboard, or a URL keyboard, use
the tel, email, or url keywords for the type attribute on an input
element, respectively. To display a numeric keyboard, set the value of
the pattern attribute to "[0-9]" or "\d".
These keywords and the pattern attribute are part of HTML 5, and are
available in iOS 3.1 and later. The following list shows how to
display each type of keyboard, including the standard keyboard.
Text: <input type="text"></input>
Telephone: <input type="tel"></input>
URL: <input type="url"></input>
Email: <input type="email"></input>
Zip code: <input type="text" pattern="[0-9]*"></input>
http://developer.apple.com/library/ios/#documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html#Configuring the Keyboard for Web Views