This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
<input id="ok" />
$('.hor-minimalist-a').on('blur','#ok',function(){
});
with this code above, i can handle events which fire If i leave the input field.
How can I detect if someone clicks outside of inputfield without coming to input. I mean the user never came to this input field before, so there was no focus at all.
$('.hor-minimalist-a').on('?','#ok',function(){
?
});
$(document).on('click', function(e) {
if ( e.target.id != 'ok' ) {
// you clicked something else
}
});
That would capture any click except on the input, but why would you need it ?
To capture only clicks on .hor-minimalist-a and not the entire document, just replace document with that selector in the code above.
How about:
$('.hor-minimalist-a').on('click',':not(#ok)',function(){
That'll register click events within .hor-minimalist-a but outside the input #ok
There is a jquery plugin for that:
http://benalman.com/code/projects/jquery-outside-events/examples/clickoutside/
Related
This question already has answers here:
Prevent line/paragraph breaks in contentEditable
(11 answers)
Closed 2 years ago.
How can I prevent the user from writing a new line with the enter key in a contenteditable div?
So far I have tried (the id of my editable div is editable:
$('#editable').on('keyup', function(e) {
if (e.which == 13) {
event.preventDefault();
}
});
However this does not work.
Is this possible using JS and jQuery?
Edit
I have been informed that pressing enter does not insert a new line so I have put a picture showing when happens when I press enter inside the editable div.
I would like code to remain on one line basically, even if the user presses enter.
Instead of keyup, use keydown.
const ediatble = document.querySelector('#editable');
ediatble.addEventListener('keydown', e => {
if (e.key === 'Enter') {
e.preventDefault();
}
});
See example on JSFiddle
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I ran into another problem with JS created inputs. I want the input to focus on the next one as soon, as it gets filled. So I write a number -> boom I'm on another input. I found this code, already posted on StackOverflow:
var inputs = $(':input').keypress(function(e){
if (e.which == 13) {
e.preventDefault();
var nextInput = inputs.get(inputs.index(this) + 1);
if (nextInput) {
nextInput.focus();
}
}
});
Which I edited to:
var inputs = $(':input').keypress(function(e){
var nextInput = inputs.get(inputs.index(this) + 1);
if (nextInput) {
nextInput.focus();
}
});
It works fine. Until I ad new inputs with JS createElement() function. Then it always stops on the last input that was on the page right after load.
Any solutions?
You can follow my work here.
Thanks!
Because when you call $(':input').keypress(); The input (that you create by the JS method createElement()) was not created yet so of course it will not have the keypress event.
There are some solutions for you. The easiest way is use delegated event handler. You can see how to use it here
Thank to the feed back of #Rory McCrossan
This question already has answers here:
Get clicked element in delegated event with jQuery
(2 answers)
Closed 6 years ago.
I am generating modal box dynamically. In that modal i have two button. Yes & No.
No will close the modal and that is working properly.
I am facing problem while clicking on Yes button.
Once user click on Yes it will update the database.
Here is the code.
<script type="text/javascript">
$('document').ready(function(){
$("#btnYes1").on("submit", function(e) {
// $('#btnYes1').click(function (e) {
//$('#btnYes1').click(function() {
e.preventDefault();
alert('working');
});
});
</script>
Code used to generate Modal box. You can see i tried 2-3 things but it is not working.
var modalval='Yes';
modalval += 'No'; $('#modaltext').append(modalval);
Attach the event listener to your document instead.
$(document).on("click", "#btnYes1", function(e) {
// Your code..
});
Your jQuery will run only once - when the page is first loaded. The "btnYes1" element does not exist at that point.
You need to register the event after the modal has been generated and the button is on the page.
// after modal has been generated
$("#btnYes1").on("submit", function(e) {
e.preventDefault();
alert('working');
});
For example, put that code in the success from the AJAX call that loads the modal.
I have the following input element on my page:
<input class="input" name="custom_fields[new]" placeholder="Enter placeholder" type="text">
I have a Twitter Flight event listener on this element that looks like this:
this.on('keyup', {
inputsSelector: this.updateViewInputs
});
Which triggers this method:
this.updateViewInputs = function(ev) {
var isDeletionKeycode = (ev.keyCode == 8 || ev.keyCode == 46);
// Remove field is user is trying to delete it
if (isDeletionKeycode && this.shouldDeleteInput(ev.target.value, this.select('inputsSelector').length)) {
$(ev.target.parentNode).remove();
}
// Add another field dynamically
if (this.select('lastInputsSelector')[0] && (ev.target == this.select('lastInputSelector')[0]) && !isDeletionKeycode) {
this.select('inputsContainer').append(InputTemplate());
}
// Render fields
that.trigger('uiUpdateInputs', {
inputs: that.collectInputs()
});
}
And finally triggers uiUpdateInputs:
this.after('initialize', function() {
this.on(document, 'uiUpdateInputs', this.updateInputs)
});
this.updateInputs = function(ev, data) {
// Render all inputs provided by user
this.select('inputListSelector').html(InputsTemplate({ inputs: data.inputs }));
}
All of this functionality works as expected on Chrome and Firefox. Users can type into the input and see the page change in 'real time'. Users also get additional fields that they can enter text into and see the page change.
The issue in question arises when using Safari, as a user enters text into the described input field the text in the input field becomes highlighted (selected) and when they enter the next character all the content is replaced with that single character. This results in the user not being able to enter more than 1 or 2 characters before having them all replaced by the next entered character.
I have tried several approaches to fix this problem but none have worked, they include:
Using a setTimeout to delay the code run on the keyup event
Using Selection to try to disable the selection of the text using collapseToEnd.
Using click,focus,blur events to try to remove the selection from the entered text
Triggering a right arrow key event to try to simply move the cursor forward so they user does not delete the selected text
Using setInterval to routinely remove selections made by the window
I am very confused why this is happening and I am wondering if this is a bug in webkit with Flight. I see no issue with the Firefox or Chrome versions of this page. Thanks for any help!
This seems to be an issue with certain versions of Safari. When listening for the keyup function in javascript it will automatically select all of the text in the box and subsequently delete it all when the next key is typed. To prevent this from happening call preventDefault on the event object that is passed to the keyup function.
this.on('keyup', function(e) {
e.preventDefault()
});
This question already has answers here:
jquery input select all on focus
(17 answers)
Closed 9 years ago.
Id like to select all text from input on focusing:
<input id="selectMe" value="123" />
<input type="button" id="focusHim" value="Im working fine" />
JS:
$('#selectMe').focus( function() {
$(this).select();
console.log('focus fired');
});
// little test if focus event works fine
$('#focusHim').click( function() {
$('#selectMe').focus();
});
This simplified code works fine, but sometimes there are some issues.
Here you have fiddle: http://jsfiddle.net/daxv2/
To see my problem, please click on input #selectMe, then click somewhere else and on #selectMe again. You will see, text is selected every even attempt. I don't know why.
P.S.
When you change focus to click it works perfect:
$('#selectMe').click( function() {
$(this).select();
console.log('focus fired');
});
So i suppose there is some problem with focus event.
It seems like the WebKit browsers interfere with this because of the mouseup event.
I added this and it seems to work fine:
$('#selectMe').mouseup(function () {
return false;
});
http://jsfiddle.net/daxv2/6/
You could use click event instead of focus. It works fine, also you can simplify your code by using this.select() instead of $(this).select()
http://jsfiddle.net/daxv2/8/