Is there any way to detect that an attribute has been changed in HTML?

Asked

Viewed 1,261 times

6

I wonder if there is a way to check by javascript whether an attribute of an element has been changed or not.

For example: If I have one input, I place in it the attribute required, and someone goes in and erases the required of that element by Google Chrome Developer Tools, there would be some way, through javascript, to detect this?

Is there any event in javascript that can do something like this?

javascript html
  • 1

    You can do it, but I don’t think it’ll be worth it. As javascript runs on the client, you can’t rely on it just for data validation.

  • If the person disables the browser’s JS, it’s gone...

  • But if you have the means, the answer is welcome. I know that if you disable javascript everything goes into space. Except if logins and the like are via ajax, then the guy is required to enable javascript :)

2 answers

9


This can be done using MutationObserver. When creating Mutationobserver you specify a callback that will be called when there is a change in the DOM. Using the method observe you specify which element you wish to observe and the types of modifications on which you wish to be notified.

An example:

var input = document.getElementById('req');

var observer = new MutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
     console.log(mutation);
     if(mutation.type == "attributes" && mutation.attributeName == "required") {
         console.log(mutation);
         alert("Atributo required modificado!");
     }
 });
});

observer.observe(input, {attributes: true});
Inspecione o elemento e modifique/remova o atributo "required" do input abaixo para testar.<br /><br />
<input type="text" id="req" required />

Remember that using this for validation is not a good idea because the client can simply disable javascript, modify its code, remove it, etc.

  • Thank you very much! this will be very useful for my studies

  • He opened two popups for me when I changed the attribute. That was really expected?

  • You have to change the alert by the code you want to execute when the attribute is changed.

-7

this was my code for a portifolio project I incremented the code used here for the clock logo:

setInterval( function clock()  {
const v1 = new Date
const v2 = v5(v1.getHours())
const v3 = v5(v1.getMinutes())
const v4 = v5(v1.getSeconds())
const vX5 = v5x(v1.getMilliseconds())

document.getElementById('clock').textContent = v2 + ':' + v3 + ':' + v4 + ':' + vX5
}, 100);
function v5x(y, z){
if( y <100){
    y = '0' + y
}

if ( z <10){
    z = '0' + z
}
return z , y 

}
function v5(x){
if( x <10){
    x = '0' + x;
}
return x
}
var svg = document.getElementById('logoo');

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
 console.log(mutation);
 if(mutation.type == "attributes" && mutation.attributeName == "data-source") {
     console.log(mutation);
     document.getElementById('logoo').style.display = 'none'
     document.getElementById('clock').style.top = '20px'
     document.getElementById('clock').style.left = '15px'
 }
 });
 });

 observer.observe(svg, {attributes: true});

html : <div class="UAGSh" id="clockDiv"> <div class="OISnsepAr sU" id="separator-x1"></div> <span class="aoiJS dKj" id="jsClockSpan-title">Clock </span><span class="aoiJS dkj" id="jsClockSpan-titlePt"> Relogio</span> <br> <span class="clock" id="clock"></span> <logo class="aUSlogo" id="logo"> <path class="a"> <svg class="USLogo" id="logoo" data-source='ILUOSHDJISMDksdloiadadlçaksd sdapokOPAD Sdkaidjsd adlkiada sod89asoia' ></svg> </path> </logo> </div>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.