Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
<ons-input> addEventListener function not firing
-
Hi,
I have the following JavaScript code snippet to detect changes ons-input and clear text when X button is clicked, but it is not firing. It works with regular <INPUT> tag but not <ONS-INPUT>
input1.addEventListener('input', conditionallyHideClearIcon2);
In the following:
Array.prototype.forEach.call(document.querySelectorAll('.clearable-ons-input'), function(el) { var input1 = el.querySelector('ons-input'); conditionallyHideClearIcon2(); input1.addEventListener('input', conditionallyHideClearIcon2); el.querySelector('[data-clear-ons-input]').addEventListener('click', function(e) { input1.value = ''; conditionallyHideClearIcon2(); }); function conditionallyHideClearIcon2(e) { var target = (e && e.target) || input1; target.nextElementSibling.style.display = target.value ? 'block' : 'none'; } });
<div class="clearable-ons-input"> <ons-input type="text" value="Hi there!"></ons-input> <span data-clear-ons-input></span> </div>
<style> .clearable-ons-input { position: relative; display: inline-block; } .clearable-ons-input > ons-input { padding-right: 1.5em; font-size: 16px; width: 200px; height: 2em; border: 0; outline: 0; /* background: transparent; */ border-bottom: 1px solid black; border-radius: 1px; } .clearable-ons-input >[data-clear-ons-input] { display: none; position: absolute; top: 5px; right: 0; font-weight: bold; font-size: 1.4em; padding: 0 0.2em; line-height: 1.4em; box-sizing:border-box; /* red X button */ width:20px; height:20px; border-width:3px; border-style: solid; border-color:grey; border-radius:100%; background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%); background-color:grey; box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5); transition: all 0.3s ease; } /* .clearable-ons-input > ons-input::-ms-clear { display: none; } */ </style>
-
@jamal The
event.target
of the event is the nativeinput
element wrapped insideons-input
, notons-input
itself. Therefore, changevar target = (e && e.target) || input1;
to eithervar target = (e && e.currentTarget) || input1;
orvar target = input1;
and it should work.
-