Focus remains on field - javascript

I'm trying to figure out why my focus remains on an element. This is html from the autocomplete angular plug-in that I'm using:
<autocomplete id="search" ng-model="query" attr-placeholder="" click-activation="true" data="items" on-type="updateItems" on-select="searchItems"></autocomplete>
but every time I press enter no matter if I have my focus on the input field or not, or even on an other field, the on-select function is called every time.
this thing is in the plugin itself, maybe it needs some changes?
document.addEventListener("blur", function (e) {
// disable suggestions on blur
// we do a timeout to prevent hiding it before a click event is registered
setTimeout(function () {
scope.select();
scope.setIndex(-1);
scope.$apply();
}, 150);
}, true);

You could monitor what was the last selected input field with this code :
var lastFocusedElement = '';
// This would catch any input field - so you could add your forms selector too.
// for example : $("#myForm:input")
$(":input").focus(function () {
lastFocusedElement = $(this);
});
Then use the complete callback function from animate :
$("#div_NotificationOuter").animate({ bottom: '+=30px' }, 4000,function(){
if (lastFocusedElement != ''){
lastFocusedElement.trigger('focus');
}
});

Related

Display Error Message For Select If Expand Then Closed Without Selection Made In JQuery

I have a select and i'm after displaying an error message as soon as the user expands the select and closes it without making a selection but i cant figure how to do this.
I have it validating on.change if the val matches the default as shown below
Working JQuery When An Option Is Selected
$('#orderPosition').change(
function () {
if ($('#orderPosition').val() == 'orderPositionDefault') {
$('#orderErrorMessage').show();
$('#orderPosition').focus();
$('#orderPosition').css("background-color", "lightcoral");
} else {
$('#orderErrorMessage').hide();
$('#orderPosition').css("background-color", "transparent");
}
}
);
I have tried the following
$('#orderPosition').on('click', function () {
// var isDirty = !this.options[this.selectedIndex].defaultSelected;
var changed = $(this).val() != $(this).data('orderPositionDefault');
alert(changed ? 'changed' : 'not changed');
if (changed) {
$('#orderErrorMessage').show();
} else {
$('#orderErrorMessage').hide();
}
});
But the issue with the above is as soon as i click in the select the error message is displayed, i need it to be displayed of the user clicks in it and closes it straight away without making a selection.
Use the blur event for executing code when focus leaves on an input field.
$('select').on('change', function() {
//change things here
}).on('blur', function() {
//when select is no longer in focus here
});
Documentation: https://www.w3schools.com/tags/ev_onblur.asp

sap.m.Input change event is triggered when clicking on CheckBox

I have two controls in my page i.e. sap.m.Input and sap.m.CheckBox. There is a change event attached to input field which gives an error bar if input text is not matched with the regex. This change event is triggered on clicking out of focus of the input field. Clicking on checkbox will hide this input and show a third control. Now if i enter something in input field which will not match regex and click on checkbox, It is triggering changeEvent of Input and not even selecting the checkbox. I tried many things like checking in change event whether checkbox is ticked or not, attached a click event on checkbox but no solution.
Please help me so that i will be able to determine the click on checkbox if the current focus is on input field
Here is an example at jsbin. Here error will be thrown if input text contains # and change event is triggered.
var textInput = new sap.m.Text({text:"Area:"})
var inputField =new sap.m.Input("inptId",{
change:function(oEvent){
sap.ui.getCore().byId("barId").setVisible(oEvent.getParameters().value.includes("#"));
}
});
var select = new sap.m.Select("select",
{visible:false,
items:[new sap.ui.core.Item({text:"India"}),
new sap.ui.core.Item({text:"US"}),
new sap.ui.core.Item({text:"UK"})
]
})
var hBox = new sap.m.HBox({items:[textInput,inputField,select]})
var bar = new sap.m.Bar("barId",{
visible:false,
contentMiddle:new sap.m.Text({text:"Error"})
});
var chkBox = new sap.m.CheckBox("chkBxId",{
text:"Select from dropdown",
select:function(oEvent){
var selected = oEvent.getParameters().selected;
sap.ui.getCore().byId("inptId").setVisible(!selected);
sap.ui.getCore().byId("select").setVisible(selected);
sap.ui.getCore().byId("barId").setVisible(false);
}
});
var vBox = new sap.m.VBox({
items:[bar,hBox,chkBox]
});
In this example it is happening sometimes not always but in my project its happening always as there are lot of validations are happening in change event.
#Ashish for focus out try following code.
this.getView().byId("input").addEventDelegate({
onfocusout: function() {
console.log("focus lost !!");
}
}
and for enter key press use following code
.addEventDelegate({
onkeypress: function(e) {
if (e.which === 13) {
do your stuff;
}
}
})
once focus is out it will trigger function provide in onfocusout and while on focus if enter key is pressed it will trigger function provide in onkeypress event.
Also you can merge this in one.
addEventDelegate({
onkeypress: function(e) {
console.log("Enter pressed fouse out", e.which);
},
onfocusout: function() {
do your stuff!
}
})

JQuery clockpicker not triggering change event on input

In a codebase I'm working on there's this type of callback binding where something has to happen whenever any input gets changed
$(document.body).on('change', '.input-sm', function (){
...
})
The thing is, some input-sms are changed via a clockpicker, which does not trigger the 'change' event. How would I make this work? Ideally, I'd like clockpicker to trigger the change event.
http://jsfiddle.net/4zg3w5sj/7/
EDIT: A callback is being bound to multiple inputs with clockpickers at once, so I can't use the input variable to trigger the change event (except if I explicitly iterate over the inputs I guess)
you can use the clockpicker callbacks
beforeHourSelect : callback function triggered before user makes an
hour selection
afterHourSelect : callback function triggered after user makes an
hour selection
beforeDone : callback function triggered before time is written to
input
afterDone : callback function triggered after time is written to input
input.clockpicker({
autoclose: true,
afterDone: function() {
input.trigger("change");
}
});
I've figure out the issue
The plugin trigger the change event but they use triggerHandler instead of trigger that mean you can't add listener on body , you have to listen directly on the input
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
raiseCallback(this.options.beforeDone);
this.hide();
var last = this.input.prop('value'),
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
if (this.options.twelvehour) {
value = value + this.amOrPm;
}
this.input.prop('value', value);
if (value !== last) {
this.input.triggerHandler('change');
if (! this.isInput) {
this.element.trigger('change');
}
}
if (this.options.autoclose) {
this.input.trigger('blur');
}
raiseCallback(this.options.afterDone);
};
see here a fix
var input = $('#input-a');
var value = input.val();
// bind multiple inputs
$('.myinput').clockpicker({
autoclose: true,
afterDone: function() {
console.log("test");
}
});
// in the actual code it's not tied to an id but to a non-unique class
// does not trigger if changed by clock-picker
$(".myinput").on('change', function(){
console.log("!!!!")
})

What event is triggered when the value of an input field is changed?

I'm using a JavaScript library that occasionally changes the value of an input field. I want to detect when that happens.
Apparently, the change and input events are not triggered when the value of an input field is changed (at least not on Chrome).
To verify that, I have tried this (using jQuery):
<script>
$(function() {
$('#inp').on('change',function() { console.log('change event'); });
$('#inp').on('input',function() { console.log('input event'); });
$('#inp').val('hello');
});
</script>
<input type="text" id="inp">
Neither the change event nor the input event is triggered when I call .val('hello').
How can I detect the change? (Please remember that the code that changes the value is outside my control, so I cannot add a call to trigger() there.)
There is a work around, you can pool the value of textbox after regular intervals and trigger the event when it is changed.
Live Demo
$('#elementId').change(function(){
alert("changed");
});
var previousVal = "";
function InputChangeListener()
{
if($('#elementId').val() != previousVal)
{
previousVal = $('#elementId').val();
$('#elementId').change();
}
}
setInterval(InputChangeListener, 500);
$('#elementId').val(3);
Edit based on comments for many elements.
You can use array and monitor, 30 element wont be a performance concern
Live Demo
$('.someclass').change(function(){
alert("changed, id >> " + this.id);
});
var hashTablePrevElem=[];
$('.someclass').each(function(){
hashTablePrevElem[this.id] = this.value;
});
function InputChangeListener()
{
$('.someclass').each(function(){
if(hashTablePrevElem[this.id] != this.value)
{
hashTablePrevElem[this.id] = this.value;
$(this).change();
}
});
}

using jquery i want the a div to hide when the input is empty?

For example say i have a text box and a hidden div called suggestions
$("#suggestinput").on({
keyup: function(){
$("#suggestions").addClass("active");
},
blur: function () {
$("#suggestions").removeClass('active');
}
//another event to know if input is empty while on focus, then removeClass('active');
});
The first event is when the user types in the input show suggestion, the second one is blur, so when the user unfocuses on the input the suggestions el will hide, i want a third event to check while on focus if the input is empty remove active class.
Working example is here thanks: http://jsfiddle.net/HSBWt/
Try this - http://jsfiddle.net/HSBWt/1/
$("#suggestinput").on({
keydown: function(){
$("#suggestions").addClass("active");
},
blur: function () {
$("#suggestions").removeClass('active');
},
keyup: function () {
if ( $(this).val() == "" ) {
$("#suggestions").removeClass('active');
}
}
});

Categories