first of all sorry for my low english..
i have this code:
<input id="id1" type="text"/>
<input id="id2" type="text"/>
document.getElementById("id1").onkeypress = function(e) {
var chr = String.fromCharCode(e.which);
if ("><abc/\"".indexOf(chr) >= 0)
return false;
};
How can I choose the second id? Example : id1, id2 i want use this code
Thanks!
Using jQuery:
$('#id1, #id2').on('keypress', function(e) {
var chr = String.fromCharCode(e.which);
if ("><abc/\"".indexOf(chr) >= 0)
return false;
});
You can expand the list of id selectors: "#id1, #id2, #id3, ...".
But if there are too many elements, it's better to assign them a class and target them like this:
$('.className').on('keypress', function(e) {
var chr = String.fromCharCode(e.which);
if ("><abc/\"".indexOf(chr) >= 0)
return false;
});
Instead of using id's in the first place, which leads to brittle code (like you are seeing with your problem) and doesn't scale well, set up the event on an ancestor element and handle the event when it bubbles up to that ancestor element. This is called event delegation and simplifies your code. When handling the event, the event.target element will hold a reference to the actual element that triggered the event in the first place, so you don't need to know its id.
// Use modern standards to event handling with .addEventListener(), rather than
// setting up event properties. Here, we're handling the event at the wrapper
// element, so when an event originates from a descendant, it will bubble up
// and be handled here.
document.getElementById("wrapper").addEventListener("keydown", function(e) {
// The event.target references the element where the event was triggered
// To get the character that was presssed, use event.key
// indexOf returns -1 when no match is found.
// Instead of checking for the condition where you should do
// nothing, check for the condition where you should do something
if ("><abc/\"".indexOf(e.key) > -1){
console.log("Match found");
}
});
<div id="wrapper">
<input type="text">
<input type="text">
</div>
Related
Is there a way to add some kind of listener for a type of html element? For example if i wanna call a function when the user clicks any p element
the easiest answer would be using addEventListener() if you want a specific html tag just like what i wanted in my question then you'll find the answer there ill paraphrase it here too
add this
<script>
document.addEventListener("click", function(e){
//your desired nodeName like : DIV , SPAN , LI etc
if(e.target && e.target.nodeName== 'DIV')
//add a function below to trigger
{alert('bingo')}
});
</script>
to the end of your document
by the way don't forget to use uppercase nodeNames or just put a toLowerCase() before it. cheers :)
Add the event listener to the window / document / document.body and check the type of the element and the types of its parents because if you have a <span> inside a <p>, clicking the span won't trigger the click in the paragraph.
document.addEventListener("click", function (eventArgs) {
var target = eventArgs.target;
var elementToLookFor = "p";
while (target !== null) {
if (target.tagName.toLowerCase() === elementToLookFor) {
// Do magic stuff with the paragraph
console.log(target);
}
target = target.parentElement;
}
});
This technique is called "event delegation."
Edit: Note that you cannot early return from the loop above. If your have nested paragraphs, i.e.
<p>
Hey,
<p>there!</p>
</p>
Having an early return will only call your event handler for the inner paragraph, whereas you said that you'd like the handler to be invoked on every paragraph which is why you need to traverse all the ancestors of the element.
I assume that you are looking for code along these lines:
var paras = document.getElementsByTagName("p");
// Loop through elements.
for(var i = 0; i < paras.length; i++) {
// Add listener.
paras[i].addEventListener("click",
function() {
// Execute function.
}, false);
}
I'd just select all the elements on the page and add eventListeners on them like so:
function addListeners(elementType, eventType, callback) {
Array.prototype.slice.call(document.querySelectorAll(elementType)).forEach(function (el, i) {
el.addEventListener(eventType, callback, false);
});
}
Above we use querySelectorAll to pick all the wanted elements, convert it to an Array (if you use es6, you can use Array.from) and then we loop through the array and add listeners with the wanted callback.
Here's an example: https://jsfiddle.net/a7en4d4s/
Look at this JSFiddle, and see if it works for you
<span>Click Yes</span><br/><br/>
<span>Click No</span><br/><br/>
<a>Clicked: <b id="result"></b></a>
<script>
$("span").click(function(){
var a = $(this).html();
$("#result").html(a);
});
</script>
I have the following code
Here i have 2 selectors "td.slot" and "td.slot1" and 2 events "mouseover" and "mouseleave".
As you can see i am using e.type to get one of the events. Now i want to know if there is a way like e.selector where i can get one of the selectors
$(document).ready(function(){
$("table").delegate('td.slot,td.slot1','mouseover mouseleave',function(e){
var row = $(this).parent()[0];
var rowHead = row.cells[0];
var colHead = row.parentNode.rows[0].cells[$(this).index()];
if (e.type == 'mouseover') {
$(rowHead).css("background-color","orange");
$(colHead).css("background-color","orange");
}
else
{
$(rowHead).css("background-color","white");
$(colHead).css("background-color","white");
}
});
Description
You can use event.currentTarget
event.currentTarget The current DOM element within the event bubbling phase.
Sample
html
<body>
<div>div</div>
<button>button</button>
</body>
jQuery
$("body").delegate('div,button','click',function(e){
alert($(this));
});
Check out this jsFiddle
More Information:
jQuery- Event Object
In a simple example, I try to make delegate for first-level children of an element. The problem comes when the child elements have children. The mouse event consider the clicked element (regardless of level).
My solution is to cycle until reaching the first-level child; but I wonder if this is the best method to do so.
Isn't there a method for directly returning the first-level children upon delegate click?
JS
window.onload=function(){
document.getElementById('test').addEventListener('click', function(e){
console.log(e.target);alert(e.target.id);
}, false);
}
HTML
<div id="test">
First
<b>Second</b>
Third
Fourth
<div id="div">Division</div>
<div id="div2"><span>Division</span></div>
</div>
If it's only the first level elements you're after, you could check if the parentNode of the clicked element is the root, no further traversing needed. Otherwise you'll need to traverse up to the first child of the root. Something like:
// level0 is the root
level0.addEventListener('click', function(e) {
var from = e.target || e.srcElement;
from = from.parentNode === level0 ? from : findFirst(level0,from);
/** do things **/
}, false);
// traverse up to first child of [root]
function findFirst(root,el){
while(true){
el = el.parentNode;
if (el && el.parentNode === root){
return el;
}
}
return null;
}
Here is a fork of your jsfiddle, using the above.
using only javascript you can use a recursive function that will find the first parent element with an id:
function findParentWithId(element){
if(element.id){
return element;
}
return findParentWithId(element.parentNode);
}
and then, use it with the target element of the event
document.getElementById('test').addEventListener('click', function(e){
console.log(findParentWithId(e.target));alert(findParentWithId(e.target).id);
}, false);
I'm not sure what's beeing ask here. Events do Bubble by default (which is actually not true, by default they would traverse top->down) because its most common to call .addEventListener with false as third argument.
You can stop most events from further bubbling up, by calling eventObject.stopPropagation() on the node where you want to stop it.
If you want to "prefilter" only the first-level children, you shouldn't use delegation at all, but query with .querySelectorAll like
[].forEach.call( document.querySelectorAll('#test > *'), function( node ) {
node.addEventListener('click', function( event ) {
alert( this.id );
}, false);
});
That would bind click event listeners on all direct children from #test.
See that in action: http://jsfiddle.net/8Xmn4/
Getting a reference to all first level children of a node is simple:
window.onload=function(){
document.getElementById('test').addEventListener('click', function(e){
return document.getElementById('test').children;
}, false);
}
this outputs, on Firebug format:
[a#first #, a#second #, a#third #, a#fourth #, div#div, div#div]
Obviously, it returns the children with their respective children, but the first level reference remains.
jQuery(':first-child') use this jquery to get the first child
I would like to detect which HTML element was double clicked. Seems to something not fire in my code. Following is my HTML code structure where you double click detect which item is clicked.
<div id="mainWrapper">
<div id="Banner" name="Banner" class="editable">This is the banner</div>
<div id="MainMenu" class="editable">This is the main menu</div>
<div id="LeftSideBar" class="editable">This is the submenu or left sidebar content</div>
<div id="MainContent"class="editable">Here is the main content</div>
<div id="RightSideBar" class="editable">Here are commercial ads</div>
<div id="Footer"class="editable">This is the footer
Go Home
</div>
</div>
External JavaScript
window.onload = function(){
// Listen to the double click event.
if ( window.addEventListener )
document.body.addEventListener( 'dblclick', onDoubleClick, false );
}
Get the element which fired the event. This is not necessarily the element to which the event has been attached.
function onDoubleClick( ev ){
var element = ev.target || ev.srcElement; //target = W3C, srcElement = Microsoft
alert(ev.type); //displays which event has fired
var targ;
if (!ev) var e = window.event;
if (ev.target) targ = ev.target;
else if (ev.srcElement) targ = ev.srcElement;
alert(ev.target); //displays which type of html element has been clicked (it shows div but not which div)
// Find out the div that holds this element.
var name;
do {
element = element.parentNode;
}
while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' ||
element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )
alert("The class name for the element is " + element.className); // I get nothing
alert("The node name for the html element is " + element.nodeName);// I get "body"
}
I'm not sure exactly what it is you're trying to accomplish. Is it so people can edit things? I'd be tempted to apply the onclick event listener just to those items you want to be editable. If they all have "editable" css classes, doing so is trivial with jquery:
$('.editable').dblclick(dblclickFunc)
This would apply an event listener to every element with a class of editable. However, to make it more useful, I'd change that to
$('.editable').dblclick(function(e){ dblclickFunc(e, this); })
and for the function
dblclickFunc(e, el){
alert('received an event of type ' + e.type + ' on ' + el.tagName);
}
So you've got a reference to the element that sent the event. From there, you could check IDs, or even go so far as to loop through all your editable elements and compare them to the one that got passed to you. Once you have a match, you know precisely which element was clicked on.
You are using JavaScript in your example, but you also tagged the question with jQuery, so I assume jQuery is OK to use. In fact, exactly this type of event handling is greatly simplified using jQuery’s API, since it normalizes the events for all modern browsers. Highly recommended.
You can delegate the event to the document and detect all double clicks in the entire document using jQuery using the on() function:
$(document).on('dblclick', function(e) {
console.log(e.target); // target is the element that triggered the event
alert("The class name for the element is " + e.target.className);
alert("The node name for the html element is " + e.target.nodeName);
});
If you want to listen on certain elements inside a specific container, try this:
$('#mainwrapper').on('dblclick', 'div', function(e) {
console.log(e.target);
});
This will listen for any double clicks inside #mainwrapper, but only trigger the handler if a DIV element was the target.
You can use .on()
$(".editable").on("dblclick", function(e){
$(this).attr('class') //Class Name
});
How can I do that?
event.target returns a HTML object,
and my element is a jQuery object.
Is there a better way to find out if event.target = my_jquery_object, besides comparing IDs or classes?
I want to make sure that it's the same object, not just a element with a similar class...
I tried with $(event.target) !== the_element and it fails
the_element is defined at the begining as $('.something', $(this))
What I am trying to do is to make a box close when the user clicks outside of it, but with the condition that the click wasn't made on the link that opened the box in the first place.
So I have this:
$(document).click(function(event){
if(($(event.target).parents().index(box) == -1)
&& box.is(':visible')){
close();
}
});
And I want to add another condition that verifies that the click wasn't made on the link that opened the box.
This works, but I don't like it:
if($(event.target).attr('id') != the_element)
:)
You can get the actual DOM element from the jQuery using .get(0) or simply the_element[0]. It would probably be better to check with jQuery, though.
if (the_element.is(event.target))
{
...
}
Using your example:
$(document).click(function(event){
if (the_element.is(event.target)) {
return false;
}
if(($(event.target).parents().index(box) == -1)
&& box.is(':visible')){
close();
}
});
Try -
if(event.target === the_element[0])
the_element[0] should unwrap your jQuery object and return a 'normal' DOM object, you can then compare it against the DOM object returned by event.target.
Maybe I'm wrong, but it looks like nobody understood the question?... I also want to know how to GET JQUERY OBJECT on which I used listener function from the EVENT.TARGET, but not a DOM node for a jquery object!!))
So... I found not a very handy, but working solution:
var elem = $('<input type="text" class="input" />');
elem.focus( $.proxy( function( e )
{
this.onInpFocus( e, elem );
}, this ) );
And modified the listener's callback method to receive 2 arguments:
onInpFocus : function( e, inp )
Instead of using simple way like:
elem.focus( $.proxy( this.onInpFocus, this ) );
Actually, I found another way, much more handy one :)
Just need to use the data argument:
Data to be passed to the handler in event.data when an event is
triggered.
Now my code looks like this:
var inp = $('<input type="text" />');
inp.focus( { j : inp } , $.proxy( this.onInpFocus, this ) );
//and the handler method
onInpFocus : function( e )
{
var inp = e.data.j;
...
}