I'm writing a Chrome extension and I'm trying to programmatically trigger a keypress event on the textarea element where you type in Facebook chat.
If I look at the element in the inspector, I can see that it has an onkeydown handler set:
onkeydown="run_with(this, ["legacy:control-textarea"], function() {TextAreaControl.getInstance(this)});"
--but I can't trigger it. While trying to figure out why I can't trigger it, I found that when I select the element using one of the classes on it and type document.querySelector('._552m').onkeydown in the console, it comes up null. Likewise, using getAttribute on it for onkeydown comes up null.
What am I missing here? How can I get at this event handler? Why can I see it set on the element in the inspector and yet not access it programmatically in the usual way? Is React pulling some weird magic here?
Edit: document.querySelector('._552m').attributes shows the onkeydown attribute listed....wtf...
If document.querySelector('._552m').attributes displays the onkeydown attribute, you should be able to access the event handler using document.querySelector('._552m').getAttribute('onkeydown') (it works for me, returns this on my facebook page):
"run_with(this, ["legacy:control-textarea"], function() {TextAreaControl.getInstance(this)});"
Otherwise, since the attributes object is just a NamedNodeMap you can just access it using getNamedItem('onkeydown') on document.querySelector('._552m').attributes like this:
var elm = document.querySelector('._552m')
elm.attributes.getNamedItem('onkeydown') //returns the attr itself
elm.attributes.getNamedItem('onkeydown').value //returns the string value
Related
I would like to know that how I can set the chart-click property through java script for a given canvas element. I tried doing
angular.element(document.getElementById(id))[0].attributes[attributeName].value =value;
but of no help I guess.
I think I am missing something related to binding.
You can use the native addEventListener Property to programmatically add a click property to the DOM element. It can be done like so :
document.getElementById(id).addEventListener('click', function(){
//The function to be called on click
})
For more Info see here
I can't find any method in the Documentation to manually set the focus to an element.
It is supposed to support the DOM Element class, but when i do
var elem = ele.ownerDocument.getElementById("start");
elem.focus();
it does nothing. elem is correctly set, but it doesn't recognize the focus() method.
Apple's TVJS Framework doesn't provide any method in his classes to manually focus an element.
Neither in the standard Document Object Module classes it incorporates have any kind of method to directly access the DOM and focus an element.
The closes thing available is the autoHighlight attribute which allows to focus on render some specific elements in certain positions.
In pure js you can document.getElementById("start").autofocus; : On page load input is autofocus
Use autoHighlight for this purpose.
autoHightlight="true"
Both the containing element and one child element have to be set to true.
I want to click on link on a page and navigate to a new page. I used following code for it :
document.getElementsByClassName('classname').click();
I used classname as it dont have id. document.getElementsByClassName('classname') works fine. But use of click() returns :
TypeError: document.getElementsByClassName(...).click is not a function
Why I am getting this error? I read in couple of answers in stackoverflow that click() works fine. I am using this code in firebug console of firefox.
If click() won't work, what other options I have?
document.getElementsByClassName returns an array of elements, so you have to specify the index:
document.getElementsByClassName('classname')[0].click();
As a side note, programatically clicking an element doesn't run the native behavior, it runs the assigned click handlers for said element.
Use
document.getElementsByClassName('classname')[0].click();
Returns a set of elements which have all the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName on any element; it will return only elements which are descendants of the specified root element with the given class names.
Reference
I have an internal website that has a link with NO onClick attribute present.
I want to add an onclick attribute with a function as the value, like so:
onClick="LinkTracker();return true"
So that I get a call to the function, but the link click is still followed by the browser.
I tried:
item.onclick=Function("LinkTracker();return true");
I also tried just a simple function with no return info, and that function was never called either.
When I inspect the link element with Firebug, I do not see the onclick attribute set.
I DO see the href value (which I changed) properly updated.
Any clues?
item.onclick=function(){LinkTracker();return true;}
try that.
test case
I create a new window when i press a button. This window contains html input elements that i want to manipulate with jquery, but i can't catch the elements. Normally i would use the live function because the html is first added to the dom when the button is pressed, but its not working.
jQuery(document).ready(function () {
var opretKnap = jQuery("input[value='Open window']");
jQuery(opretKnap).live('click', function () {
var inputsDate = jQuery("input[vdfDataType]");
});
});
jQuery("input[vdfDataType]");
What's vdfDataType? That's not a standard HTML attribute. Are you meaning to use custom attributes? (It's a generally questionable strategy, especially when you want to select on them.)
Is the element you're trying to get in the current document? You say it's a ‘new window’, but if you actually mean a new window and not an in-page DOM pop-up, you won't be able to select it from the document that opened it.
jQuery(opretKnap).live
should be avoided:
the .live() method should always be called directly after a selector
That is, the argument in the jQuery() wrapper immediately before the live() call should be a selector string, such as "input[value='Open window']" directly. opretKnap is a jQuery wrapper already, so opretKnap.live() would be OK.
jQuery("input[value='Open window']")
Avoid using value as an attribute selector. Apart from it not really being very specific (what happens if a text field somewhere happens to have that string in it?), it's also unreliable for many cases in jQuery.
The value HTML attribute and the value DOM property are two different things for text inputs (and some others); the property gives the current field value, whereas the attribute gives the original value that was specified in the HTML before any user input. This attribute maps to the DOM defaultValue property, not value.
However, a bug in the Sizzle selector engine used by jQuery means it'll read the value property in preference. This would give the ‘wrong’ (but possibly desired) results... but not consistently, because in many cases the browser's own querySelectorAll call will be used for speed, short-cutting Sizzle's bug.
Whilst this might not affect you (eg. if you're selecting a button, whose value will never change), you should consider the [value=...] selector to be highly suspect, and avoid it whenever possible. Find another way to pick the particular input you want, such as a .class, #id, [name="something"] or [type=submit] if that's what it is.