search

westonganger / input-case-enforcer

Enforce uppercase, lowercase, or Capitalized inputs & textareas
MIT License
4 stars 2 forks source link

Javascript vanilla #3

Open urufudev opened 1 year ago

urufudev commented 1 year ago

will there be any possibility to do it in javascript without jquery? i love this package

westonganger commented 1 year ago

For my own curiousity and learning I am attempting to do this in #4. This project is a good candidate for the experiment as its a pretty small codebase.

Something I notice right away after putting in a little effort is that the public API of the library changes just to accommodate vanilla JS. So it would be next to impossible to develop jquery/vanilla in tandem.

Other main issue I note is that namespaced events are not built-in to plain JS so requires some hackery.

westonganger commented 1 year ago

Tracking the discussion for namespaced jquery events here, https://github.com/HubSpot/youmightnotneedjquery/issues/309

m0chael commented 1 year ago

I've created an experimental version of this in Vanilla Js called input-case-enforcer-no-jquery, it's currently attached to the window. I opened a pull request for it. Please let me know if there needs to be any adjustment for the PR to get accepted.

urufudev commented 1 year ago

I've created an experimental version of this in Vanilla Js called input-case-enforcer-no-jquery, it's currently attached to the window. I opened a pull request for it. Please let me know if there needs to be any adjustment for the PR to get accepted.

Hello. I tried your .js, but when I use it identifying by class name, it only works on the first input, and not on the rest.

<script> document.addEventListener("DOMContentLoaded", function() { window.inputCaseEnforcer.init('.bestupper', 'uppercase'); }); </script>

m0chael commented 1 year ago

@urufudev Thanks for trying it out. It currently uses document.querySelector() rather than document.querySelectorAll(), so it would need to specify an ID, or it'll only use the first instance of a class name. I will work on adding support for multiple classes with document.querySelectorAll() in the near future!

m0chael commented 1 year ago

@urufudev I've pushed a new version of mine, it should be working now for multiple classes. I tested the main functions which is detailed in the demonstration file index-no-query.html by using window.inputCaseEnforcer.init('.enforced-uppercase', 'uppercase');. Please let me know if that works for you.

urufudev commented 1 year ago

@urufudev I've pushed a new version of mine, it should be working now for multiple classes. I tested the main functions which is detailed in the demonstration file index-no-query.html by using window.inputCaseEnforcer.init('.enforced-uppercase', 'uppercase');. Please let me know if that works for you.

Thanks, work's fine 😄