Show/retain keyboard when password toggler is clicked - javascript

I have the following code, which results in a single password input being rendered with the toggler overlaying the visible input. The ion-toggle directive toggles visibility of the two inputs.
<label class="item item-input">
<input placeholder="Password" ng-hide="showPassword" type="password">
<input placeholder="Password" ng-if="showPassword" type="text">
<ion-toggle ng-model="showPassword" toggle-class="toggle-energized"> </ion-toggle>
</label>
When the toggler has focus, the software keyboard retracts. The user has to then tap back into the input to show the keyboard again.
How can I programmatically show/retain the keyboard when the toggler has focus? I've tried writing a directive to force focus back onto the inputs, but that feels clunky, and there's the issue of there being two inputs.
Here's a basic demo. You won't get a keyboard in a desktop browser, of course.
Thank you.

I created a directive which will give focus on password field when toogle button is clicked. Also refactored html of password field instead of two field it will only show one field.
Markup
<ion-content>
<label class="item item-input" ng-init="pwd">
<input placeholder="Password" ng-attr-type="{{showPassword? 'text': 'password'}}"
ng-model="pwd" do-focus="showPassword"/>
<ion-toggle ng-model="showPassword" toggle-class="toggle-energized"> </ion-toggle>
</label>
</ion-content>
Directive
.directive('doFocus', function(){
return{
link: function(scope, element, attrs){
scope.$watch(attrs.doFocus,function(newValue, oldValue){
element.focus();
});
}
}
});
Forked Codepen
Edit
Directive has implemented in such a way that we are passing to toggling flag name to the showPassword inside directive attribute like do-focus="showPassword" so that directive will put $watch on the scope variable by using attrs.doFocus, watcher function gets fired and when you toggle the showPassword button. Basically this inner watcher is scope.$watch('showPassword'. Then the function first parameter would be newValue which is changed value & oldValue means the previous value of showPassword model. Here in your case newValue & oldValue are just redundant they are just not use anywhere, but if you wanted to do something on there change then they could help you.

The cordova keyboard plugin can close the native keyboard but not open it (it can open it on android but not ios). This is a interesting problem sometimes with multiple inputs (mostly on ios) I will have the keyboard close and then reopen. If you only need android you can use this plugin to open the keyboard when the toggle is taped using on-tap="foo()", however as far as I know as of now there is now other way to interact with native keyboard or keyboard events. Unless on toggle tap force focus back to the password input, but like you said that is not ideal: give the plugin a try, maybe you can get it working on both platforms.
Keyboard Plug-in: https://github.com/driftyco/ionic-plugin-keyboard

Related

How to prevent blur from adding input in v-combobox

In Vuetify.js, when using <v-combobox> when I click away, the value I had typed is added to the model.
How can I prevent this?
https://vuetifyjs.com/en/components/combobox
https://codepen.io/anon/pen/NVQBWz?&editable=true&editors=101
What's strange is that the JSFiddle in the example site works, but if I copy the HTML/JS exactly into my app I experience this.
You could reset the input value on blur
<v-combobox #blur="search = ''"

Angular UI Typeahead - Manually clear/hide dropdown

My use case is rather simple. I'm using the typeahead directive as a search box and want to manually clear/hide its dropdown when hitting enter (and you haven't selected anything) - much like Google does it.
P.S. the text in my search box needs to remain intact when clearing the dropdown
You have to wrap the typeahead element in a form. If you do that the typeahead will submit the form. If you add an ng-submit directive you can put your desired behaviour in there.
<form ng-submit="search(query)">
<input type="text" ng-model="query"
typeahead="foo as foo for foo in bars"
typeahead-on-select="onSelect($item)"
typeahead-focus-first="false"
/>
</form>
Tested with version 0.12.0 of angular-bootstrap. See the comments in a related issue: https://github.com/angular-ui/bootstrap/pull/2916:
the expected behavior is that the outer form is submitted when hitting enter from the input and nothing is focused
Simply execute the beow code will close the UI Typeahead list/ dropdown unless it doesn't harm your application:
$('body').click();

Create AngularJS Directive to Validate on Blur

Hoping to re-create some of the functionality that's available to us in Angular 1.3.X -- the app I am creating has to work well (or at least well-enough) in IE 8. For that reason, I am (sadly) constrained to not using 1.3.X. I've been running into some trouble trying to emulate the $ng-touched attr that is available in 1.3.X.
One part of our app needs to alert users that their form element is invalid if they've tab-bed through it. As it stands, it doesn't set the $invalid attr on any form elements unless I've entered in text and deleted it. I tried using $pristine and $dirty to achieve $invalid after tabbing through, but they both seem to act based on the input's value, not whether it's been touched (maybe this was one of the big advantages of 1.3.X)
Goal: when a user tabs through a form, validations can be fired and set each empty form element as $invalid if it's blank. Basically to emulate the behavior of the $ng-touched attr in 1.2.X. Here's what I have so far:
angular.module('goodStewardApp')
.directive('chf-validate', function () {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
$(elm).blur(
function(elm) {
ctrl.$setValidity(elm, false);
}
);
}
};
});
Any help would be greatly appreciated. Thanks!
Turns out the best way to accomplish emulating the behavior of ng-touched in angular 1.2.x is to use ngBlur to set a validation attribute to be true. So:
<form name="aForm">
<input name="foo" ng-model="foo.bar" ng-blur="validateThisElement=true" ng-required="true">
<div ng-show="aForm.foo.$error.required && validateThisElement">
Oh no! An alert!
</div>
</form>
This allows you to run a validation after a user tabs through your form, a common way that people used to using computers will use to interact with your angular form/app. Hope this helps anyone still stuck w/ 1.2.X for IE8 reasons!

How to click on a input field and fire event in knockoutjs and test it?

What I'm trying to achieve is that when user clicks on the input field, I would like the search bar to be on top of the page. I'm using hasFocus but it only works the first time the page is loaded after I click the search bar again the event is not called.
<div class=".home-search-panel">
<input type="search" data-bind="hasFocus: searchInputFocus()" name="q" placeholder="#Global.SearchPlaceholderCopy" value="#Request.QueryString["q"]" maxlength="150" class="input-product-search" autocomplete="off" />
</div>
And here's my knockoutJs code
var searchInputFocus = function () {
document.body.scrollTop = zepto('.home-search-panel').offset().top;
};
And I think this code is using DOM manipulation which is harder to test without using jquery-jasmine how to do something like this in a knockout way so i can properly test it?
My thoughts...
You should remove the () after searchInputFocus(), it should just be searchInputFocus
The hasFocus binding needs to return true or false. hasFocus doesn't check if a control has focus, it makes the control have focus if the binding parameter evaluates to true. So, if searchInputFocus returns true, then knockout will set the input box to have focus. There is a well explained example in the documentation that I really can't make any better. :-)
It sounds like what you really want is the event binding: data-bind="event: { onfocus: searchInputFocus}" In this case, the searchInputFocus function will be called when the input box has focus.
The click binding as suggested in the comments should work too. It may not have worked for you because you need to remove the () after searchInputFocus as mentioned in point 1 above. Although the click won't fire if someone tabs to the field.
Hope that helps.

Can you show/hide the iPad Safari keyboard using JavaScript?

Is it possible to control the display i.e.(show/hide) of keyboard in iPad Safari through code?
I have 2 form fields;
1. Text box (say Name)
2. Select list/Dropdown (Say State)
My question is when user moves focus from Name to State, the keyboard is still there..Why is it so and how can I hide the keyboard when focus moves to dropdown?
Thank you.
I just ran into a very similar problem, not sure if my solution will work for you.
In my case, I have a text input inside a form. On submit, I'm using e.preventDefault() to stop the page from navigating. I believe this was also having the effect of stopping the default action of hiding the keyboard.
To solve this, I added an explicit input.blur() when the form is submitted. This seemed to be enough for safari to remove the keyboard.
Hope this helps!
I had the same issue. I had a form were keyboard should be collapsed when type out of the field (not native behavior on ipad) and when focus select field. The only solution for me was creation of hidden input
<input type="hidden" id="blurInput" />
and javascript code handler for focus event:
$element = $(event.target);
if($element.is('select')) {
$('#blurInput').blur();
$element.focus();
}
In case you want just to blur input field another solution works perfect, but between input and select it fails
document.activeElement.blur();
$('input').blur();

Categories