Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm creating a project and for it to be faster, I have chosen not to use jQuery(I would use only 5% of the full potential of the library).
In this project, I have a <textarea> element, and need to get the contents every time it changes. I have tried different examples, but none worked.
How do I write the following code using Vanilla JavaScript and native DOM Events?
$("#textarea").bind('input propertychange')
// or
$("#textarea").bind('change')
jQuery .change() is an alias for native change event.
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
You can use it fairly simple:
// Non-obtrusive JavaScript example(preffered).
element.addEventListener('change', callback, false);
// Somewhat obtrusive (not recommended).
element.onchange = function () { ... };
// Obtrusive JavaScript in HTML (not recommended).
<input type="text" onchange="function() { ... };">
Here's the plain vanilla js way to change content in the DOM.
document.getElementById("textarea").innerHTML = put your new HTML here
Also you probably want to pick a better id than textarea as that's awfully generic.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I need to be able to use javascript/jquery to update a field. But I need to be able to check whether the input was updated manually by the user or if the input was dynamically updated using a document.getElementById().value.
onChange() method seems to execute no matter if the user modified the control, or if I dynamically updated the control.
Any help? Is there something similar to onChange() that only executes when a user manually types/edits a control?
You can manually edit the .value of an input element, and as long as the element was not focussed by the user, an onChange event is not fired by most browsers.
OnKeyUp / OnKeyPress might be the event you are looking fo.
From MDN:
The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.
Also, see this link onchange event not fire when the change come from another function
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have plain HTML code, without Javascript code in it.
How would you detect if any form of Javascript was injected in the HTML ?
The application generates HTML client side. And needs to validate it once it arrives on the server.
The goal is NOT to remove Javascript, but simply detect the presence of it.
This is what tools like HTML Purifier are for. They break the input into tokens are run them against a white list.
This is safer than trying to find specific ways of inserting scripts into HTML, because there are tricks with malformed tags or non obvious attributes being used. See the XSS Evasion Cheat Sheet for example.
Removing can be easier than detecting - just escape all the HTML etc. you get with htmlspecialchars($string).
Alright, so this is a very interesting challenge:
First, check for all script tags, both capital and lowercase
<SCRIPT> <script> <sCrIPt>
Then, check for event handlers (onclick etc).
For this, we use DOM
$dom = new DOMDocument;
$dom->loadHTML($string);
You can work all sorts of magic with DOM, I recommend reading their documentation. Check for any attributes with "on" in them
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This seems to be impossible with the typical "inspect element" approach, which seems great for HTML and CSS, but that's it. I can't go to a particular element and then link to the particular JavaScript that's controlling it. Is there any way to do this?
As someone else said, there is no precise notion of "the JS controlling an element". There is JS which does something to an element, and there is JS which handles an event on a element. To handle these cases:
In Chrome devtools, select the element, right-click, and select Break on.... This will break when something happens to the element, such as a change in its children or its attributes, and leave you on the line that was making the modification.
Use "Event Listener Breakpoints" and choose to break on a particular event. Then initiate that event on an element which is listening for it, such as by clicking on the element. The debugger will take you to the line handling that event (which might be deep within jQuery, but that's another story).
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm having an issue at work with a rather picky client.
We use a rather strange script to deal with something that they require. We're an online assessment company and this script in general applies in our test player, rather than in our question editor, so we can't make change in the html, as you normally would with a text input box.
I know the maxlength attribute can be added through use of jQuery by using something along the lines of
$("input").prop("maxLength", 3)
However, I do not know how I would reference this in the HTML, as it would only be used in a couple of questions that use this script so making it standard for these questions by adding it to the JavaScript used is not an option.
The inputs that you need to apply this to would need to have ID's or Classes.
As you cannot edit the HTML this would only work, if those input's had ID's or Classes already.
If you want to apply it to an element with an Id you would do:
$("#IDGOESHERE").prop("maxLength", 3);
http://api.jquery.com/id-selector/
If it was with a class :
$(".CLASSNAMEHERE").prop("maxLength", 3);
http://api.jquery.com/class-selector/
You could get a little more fancy, by using EQ,
$("input").eq(5).prop("maxLength", 3);
Which would apply the max length to the 5th input on the page.
http://api.jquery.com/eq/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Many of you probably encountered this situation. For example you have a jQuery fade effect that fires on mouse over a link. At some point you add new links in the document trough ajax, so you need to apply the fade effect to them too.
There are two possibilities:
you call the fade function again after the ajax completes
you use something like livequery in your initial document.ready function to apply the fade on the links
Which method would you choose and why?
livequery adds overhead that is simply unnecessary unless you just don't have access to the javascript that is adding the dynamic elements.
If you're talking about event handlers that are triggering the fade, then you could use jQuery's event delegation capabilities the delegate()[docs] method (preferred) or the live()[docs] method .
If you're not talking about event handlers, then I'd definitely go with applying the code yourself in a callback to the AJAX request. livequery is slick, but should be an absolute last resort in my opinion.
jquery has a native function that does this without the need of an extra plugin. see $.live()
Edit: furthermore, your first option seems like code smell to me. keep it DRY and use $.live()