I have one more input box - ibox2, on the same page.
Problem - After doing anything on ibox1 and leaving value of length > 5 there, if I start typing in ibox2 the focus jumps back to ibox1.
It is that if loop with ibox1.focus() that is doing it. How could I remove focus entirely from ibox1 upon clicking outside and nullify the if loop and its statements.
I tried blurbut it did not work.
var ibox1 = $("#inputbox1");
$(document).on("change", ibox1,function(e) {
var valu = ibox1.val();
if(valu.length > 5){
#do something
ibox1.focus(); #used this as input box lost focus with each charater typed.
}
});
var ibox2 = $("#inputbox2"); #This is for google places autocomplete.
PS - Please do not tag it as a duplicate one, I have tried almost everything here, and only then I posted this. I shall remove it upon getting solution.
Respected mods, I followed a nice accepted answer and made a mistake about understanding $('document'), but I now got it cleared. That's the reason I am not deleting this question, even though I said I would, as it might help others. You guys, if
you feel, could delete this. Thanks.
The focus is jumping back to ibox1 because you are instructing your document to do so each time the onChange event is fired.
e.g.: $(document).on("change", ibox1, funct... where you are calling for ibox1.focus(); `.
Possible solution: bind your change event to the element of interest itself and avoid binding an event of such local significance to the whole document in the future.
Use a simple method to attach an event to inputs. Check below code it may help you.
(function(){
var in1 = jQuery('#input1'); // first input
var in2 = jQuery('#input2'); // second input
// On change of first input
in1.change(function(){
if(this.val().length > 5){
// do something
}
});
// On change of second input
in2.change(function(){
if(this.val().length > 5){
// do something
}
});
})();
Related
I have some issue understanding the jQuery().change() behavior.
The HTML is basically a lot of input elements - checkboxes ( each with ID of id^='o99-post-visible-XXX' - and they are pure CSS images as Checkboxes, but this is irrelevant ) and I have another checkbox ("#o99-check-all") to "check all" and a text input field ('#o99-post-visible-ids') that receives the IDs of the selected boxes.
The jQuery code is as follows:
jQuery(document).ready(function() {
jQuery("#o99-check-all").change(function () {
jQuery("input:checkbox[id^='o99-post-visible-']").prop('checked', jQuery(this).prop("checked")).trigger('change');
});
var checkboxes = jQuery("input.o99-cbvu-posts-checkbox:checkbox");
checkboxes.on('change', function() {
// get IDS from all selected checkboxes and make a comma separated string
var ids = checkboxes.filter(':checked').map(function() {
return this.value;
}).get().join(',');
// put IDS inside a text input field
jQuery('#o99-post-visible-ids').val(ids);
// console.log(ids);
});
});
Now, more or less everything works now, but that is not the issue.
at first , the first chunk of code was:
jQuery("#o99-check-all").change(function () {
// without .trigger('change') chained
jQuery("input:checkbox[id^='o99-post-visible-']").prop('checked', jQuery(this).prop("checked"));
});
and it did not work ( why?? ) - meaning the boxes were selected as expected but the '#o99-post-visible-ids' input field was not receiving the IDs - until I chained a .trigger('change') event - when suddenly it works well.
my confusion is with the following ( which perhaps for my little understanding of jQuery internal works is counter-intuitive )
after chain adding .trigger('change') - isn't it somehow an endless loop where a chain() event is trigger inside a listener of change() ? and if not why?
Why is the code functioning now and did not function correctly before? because again, for my understanding, there was a change, even if not triggered by direct user click. Why would I need to trigger it manually?
I'm not sure I understand what you mean. What is happening now, is that whenever you change the all checkbox, the other checkboxes will be checked/unchecked the same as all, and then the change event is triggered.
Because you added a listener for change, that function will then fire. I.e. this function will run:
function() {
// get IDS from all selected checkboxes and make a comma separated string
var ids = checkboxes.filter(':checked').map(function() {
return this.value;
}).get().join(',');
// put IDS inside a text input field
jQuery('#o99-post-visible-ids').val(ids);
// console.log(ids);
}
Without your .trigger("change") (or .change() in short), you only change a property of the inputs. So the object changes, indeed, but that does not mean the change event is triggered. It does sound counter-intuitive, but events are only triggered by user actions or if you call the event explicitly - in no other way do events get triggered.
its because you have written jQuery('#o99-post-visible-ids').val(ids); inside a function which happens only when the change event done on the inputs, assigning prop directly through .prop does not trigger the change event and so the result handler wont run
Now if I understand you correctly...
...because you're giving every check box the same ID? If you wish to apply it to more than a single element, it is best practice to use a class selector instead.
jQuery(".o99-check-all").change(function () {
// without .trigger('change') chained
jQuery(".o99-check-all").prop('checked', jQuery(this).prop("checked"));
});
See link
https://api.jquery.com/change/
I've built a page where you can filter results by typing into an input box.
Basic mechanics are:
Start typing, input event is fired, elements without matching text begin hiding
If input becomes empty (or if you click a reset button), all elements are shown again
I have noticed a problem, though, when highlighting text. Say I type "apple" into the input. Then I highlight it, and type "orange."
If an element exists on the page containing "orange," but it was already hidden because I filtered for "apple," it does not show up. I have gathered this is because the input never truly empties; rather, I simply replace "apple" with the "o" from orange before continuing with "r-a-n-g-e." This means I get a subset of "apple" results that contain "orange," as if I had typed "apple orange."
What I really want to do is clear my input on the keypress for the "o" in "orange" before hiding nonmatching elements, so I'm effectively searching the whole page for "orange."
What I've tried so far
1: Set input value to '' on select event:
$('.myinput').on('select', function(){
$(this).val('');
});
This doesn't work because it just deletes my highlighted text, which is unexpected. I only want to reset the input on the keypress following the highlight.
2: Include an if statement in my input event that checks if there is a selection within the input:
$('.myinput').on('input', function(){
var highlightedText = window.getSelection();
if($(highlightedText).parent('.myinput')) {
//reset my input
}
});
This doesn't work because it seems to fire on every keypress, regardless of if there is any actual selection. (Are user inputs always treated as selected?)
3: Add a select event listener to the input element, and set a variable to true if there's a selection. Then, in my input event, check if the variable is true on keypress.
$(function(){
var highlightedText = false;
$('.myinput').on('input', function(){
if(highlightedText = true) {
//reset my input
}
//do stuff
highlightedText = false;
});
$('.myinput').on('select', function(){
highlightedText = true;
});
});
I really thought this one would work because a basic console log in the select function only fires when I want it to – when text in the input is highlighted, but not when other text is highlighted and not when text is entered into the input. But alas, when I change that to a variable toggle, it seems to fire on every keypress again.
So the question is: How can I fire a function on input only if text in my input is highlighted?
I have found this question that suggests binding to the mouseup event, but it seems like overkill to check every single click when I'm only worried about a pretty particular situation. Also, that solution relies on window.getSelection(), which so far isn't working for me.
I've also found another question that suggests to use window.selectionEnd instead of window.getSelection() since I'm working with a text input. I tried incorporating that into option 2 above, but it also seems to fire on every keypress, rather than on highlight.
This answer is not about text selection at all.
But still solve your problem to refilter text when highlighted text is being replaced with new input.
var input = document.getElementById('ok');
var character = document.getElementById('char');
var previousCount = 0;
var currentCount = 0;
input.addEventListener('input', function(){
currentCount = this.value.length;
if (currentCount <= previousCount){
/*
This will detect if you replace the highlighted text into new text.
You can redo the filter here.
*/
console.log('Highlighted text replaced with: ' + this.value);
}
previousCount = currentCount;
char.innerHTML = this.value;
});
<input type="text" id="ok">
<div id="char"></div>
I'll agree with others that you will save yourself some trouble if you change your filtering strategy - I'd say you should filter all content from scratch at each keypress, as opposed to filtering successively the content that remains.
Anyway, to solve your immediate problem, I think you can just get the selection and see if it is empty. You can modify your second attempt:
$('.myinput').on('input', function(){
// get the string representation of the selection
var highlightedText = window.getSelection().toString();
if(highlightedText.length) {
//reset my input
}
});
EDIT
As this solution seems to have various problems, I can suggest another, along the lines of the comment from #Bee157. You can save the old search string and check if the new one has the old as a substring (and if not, reset the display).
var oldSearch = '';
$('.myinput').on('input', function(){
var newSearch = $('.myinput').val();
if (newSearch.indexOf(oldSearch) == -1) {
// reset the display
console.log('RESET');
}
oldSearch = newSearch;
// filter the results...
});
This approach has the added benefit that old results will reappear when you backspace. I tried it in your codepen, and I was able to log 'RESET' at all the appropriate moments.
I have a long list of input fields created from data in a database, more or less like this:
foreach ($data as $value) {
...
<input type="text" name="date_earned$row" id="date_earned$row" value = "$date_earned" onchange="changeDate(this)">
...
}
The onchange script is like this (note: the date is not a standard date so I'm not trying to validate a normal date). It won't let me set focus back to the element that I just changed, if there is an error. I have no trouble setting the focus to a different element. Why?
<script type="text/javascript">
function changeDate(sel) {
var theDate = sel.value;
var isValid = true;
if (theDate) {
<!-- .... some stuff in here to validate the date, sets isValid = false if it is not correct format} -->
}
if (!(isValid)) {
<!-- ... do some stuff in here to display the error message -->
document.getElementById('thiselementsid').focus(); <!-- this doesn't work when 'thiselementsid' is the id of the element which just lost focus-->
document.getElementById('someotherelement').focus(); <!-- this works, but not if 'someotherelement' is the id of the last focused element -->
}
One thing that strikes me is that you are missing an apostrophe in the line
document.getElementById('thiselementsid).focus();
after "thiselementsid." I don't know if that's the source of your problem or if it's just example code.
It's also possible that some subsequent code is calling something along the lines of document.getElementById('thiselementsid').blur() (blur is the order to lose focus). Evan's suggestion in a comment appended to your question would solve that - setTimeout would delay the setting of focus until after the blur() method was called.
There are other possibilities, most of them rather nasty. Let us know in an edit if you're still having problems. It might be good in that case to provide more of the surrounding code.
You can set it like this as well.
document.getElementById('thiselementsid').focus() = true;
I have a <input id="inp" type="text"> that user writes in, and sometimes uses suggests from a dictionary. When a suggest is selected I do:
var input = $('#inp');
input.val(input.val()+suggestedText+' ');
input.focus(); // that is because the suggest can be selected with mouse
everything works great, but when after adding a suggest that makes the resulting input.val() too long to fit in the edit field, the cursor is at the end of the string (which is good), but only the beginning of the string is visible in the edit field, so the cursor is hidden as well.
As soon as a key is pressed (a key that changes the value) the "scroll" goes to the end of the string hiding the beginning... How to trigger this behavior automatically, without having to press a key?
I have found a solution here - but it is not good as the whole input experience is changed...
Have you tried:
var input = $('#inp');
input.val(input.val()+suggestedText+' ');
input.focus(); // that is because the suggest can be selected with mouse
var height=input.contents()[0].outerHeight()
input.animate({
scrollTop:height
},'normal');
?
thank you all for answers, meanwhile I have found sth as well...
when using mouse to click the input lost focus (clik on sth else), and then regained it (thanks to input.focus()) - "scrolling" to the end, but when choosing a suggest was done with a keyboard, focus was never lost, and that is why it was not "scrolling" itself. I just simply added input.blur(), before input.focus(), now works like a charm... have a look at working example
http://46.4.128.78/input/
To make this work you need to set the focus() BEFORE you set the value. You can fix this in many ways, for example:
input.focus(); // that is because the suggest can be selected with mouse
var input = $('#inp');
input.val(input.val() + suggestedText + ' ');
Or this one:
function changeValue(element, newValue) {
element.focus();
element.val(element.val() + newValue + ' ');
}
I would like to disable a button
<BUTTON name="Next Page" onClick="Next()" VALUE="NextPage">NextPage</button>
based on a javascript variable
var opening = 0;
function Next()
{
var currentdoc = viewONE.getDocIndex();
if (currentdoc == 5)
{
**[DISABLE BUTTON]**
}
what is the javascript code please?
Background information:
Simply browsing through documents using a next and previous buttons. on the first document i want the "previous" button greyed out and on the the last document i want the "next" button greyed out.
Appologise for any incorect terms, newb and never asked this type of question before.
you are welcome to correct my term in a constructive way... need to learn.
Sam's solution is good and will disable the action of the button but won't disable it functionally.
You can disable the input button by changing changing the "disabled" attribute, but you really need to give your button a valid identifier first (I wouldn't even want to let jQuery select it by name due to the space).
jQuery would look something like this:
$('#yourbuttonid').attr('disabled','disabled');
Regular Javascript would be the following:
document.getElementById('yourbuttonid').disabled = true;
Here's an example on JSBin.
All you need to do is:
var opening = 0;
function Next()
{
var currentdoc = viewONE.getDocIndex();
if (currentdoc == 5)
{
return; //This will end the function immediately.
}
}
In terms of greying out buttons, can you not add / remove classes to show different versions of the buttons? We would need more to see your html, and what you have tried so far to help further.
Tutorial on return