{"id":21691,"date":"2022-11-14T21:03:27","date_gmt":"2022-11-14T15:33:27","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/"},"modified":"2022-11-14T21:03:27","modified_gmt":"2022-11-14T15:33:27","slug":"solved-detect-attributetype-change-of-input-element-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/","title":{"rendered":"[Solved] Detect attribute(type) change of input element [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-68020019\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"68020019\" data-parentid=\"68019424\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>This is an interesting problem, In javascript we dont have any straight approach with which we can detect the type or attribute change in javascript. I had same kind of problem and then after some studies, I found that this could be done with Mutation observer.<br \/>\nIn this code I have created an extension method for HTMLElement and all we have to do is get the reference of that HTMLElement and call this extension function and pass the callback, which we want to be run on attribute change.<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>HTMLElement.prototype.onAttributeChange = function (c) {\n    let observer = new MutationObserver(c);\n    observer.observe(this,{attributes:true});\n};\nvar elem=document.getElementById(\"txtpassword\");\nelem.onAttributeChange(function(){\n        alert(\"attribute changed\");\n});<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;html&gt;\n    &lt;title&gt; \n    &lt;\/title&gt;\n    &lt;head&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;input type=\"password\" name=\"password\" id=\"txtpassword\" &gt;\n        \n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\"><\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Detect attribute(type) change of input element [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] This is an interesting problem, In javascript we dont have any straight approach with which we can detect the type or attribute change in javascript. I had same kind of problem and then after some studies, I found that this could be done with Mutation observer. In this code I have created an extension &#8230; <a title=\"[Solved] Detect attribute(type) change of input element [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/\" aria-label=\"More on [Solved] Detect attribute(type) change of input element [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333,388,1470,342],"class_list":["post-21691","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript","tag-jquery","tag-passwords","tag-security"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Detect attribute(type) change of input element [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Detect attribute(type) change of input element [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] This is an interesting problem, In javascript we dont have any straight approach with which we can detect the type or attribute change in javascript. I had same kind of problem and then after some studies, I found that this could be done with Mutation observer. In this code I have created an extension ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-14T15:33:27+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Detect attribute(type) change of input element [closed]\",\"datePublished\":\"2022-11-14T15:33:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/\"},\"wordCount\":108,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"javascript\",\"jquery\",\"passwords\",\"security\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/\",\"name\":\"[Solved] Detect attribute(type) change of input element [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-14T15:33:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Detect attribute(type) change of input element [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Detect attribute(type) change of input element [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Detect attribute(type) change of input element [closed] - JassWeb","og_description":"[ad_1] This is an interesting problem, In javascript we dont have any straight approach with which we can detect the type or attribute change in javascript. I had same kind of problem and then after some studies, I found that this could be done with Mutation observer. In this code I have created an extension ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/","og_site_name":"JassWeb","article_published_time":"2022-11-14T15:33:27+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Detect attribute(type) change of input element [closed]","datePublished":"2022-11-14T15:33:27+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/"},"wordCount":108,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript","jquery","passwords","security"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/","name":"[Solved] Detect attribute(type) change of input element [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-14T15:33:27+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-detect-attributetype-change-of-input-element-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Detect attribute(type) change of input element [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/21691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=21691"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/21691\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=21691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=21691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=21691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}