43°F

Aaron Parecki

  • Articles
  • Notes
  • Projects

#websignin

  • Improving the HTML type="url" Field

    Sun, Jun 3, 2018 7:50am -07:00

    Using the HTML <input type="url"> field is normally a good idea when you're asking the user to enter a URL. It doesn't make a huge difference on desktop browsers, but makes it a lot easier on mobile browsers. On iOS, when you've focused on a URL input field, the keyboard switches to a slightly different layout with different keys optimized for entering URLs.

    The URL type keyboard on iOS provides easy access to special characters used in URLs.

    This is great for things like web sign-in where you're asking the user to enter their domain name to sign in. However, for some reason, browsers have implemented the URL validation a bit too strictly. If you don't enter a URL scheme, you'll get an error like the below if you try to submit the form.

    This is pretty irritating because it forces the user to enter the URL scheme http:// or https://, which ironically on the special iOS URL keyboard, requires tapping the "123" button in order to get to the screen to type the ":" character. It would be nice if the URL field accepted plain domain names and defaulted to http://.

    I wrote a bit of JavaScript that will prepend http:// to the value of any <input type="url"> form fields on blur.

    <script>
      /* add http:// to URL fields on blur or when enter is pressed */
      document.addEventListener('DOMContentLoaded', function() {
        function addDefaultScheme(target) {
          if(target.value.match(/^(?!https?:).+\..+/)) {
            target.value = "http://"+target.value;
          }
        }
        var elements = document.querySelectorAll("input[type=url]");
        Array.prototype.forEach.call(elements, function(el, i){
          el.addEventListener("blur", function(e){
            addDefaultScheme(e.target);
          });
          el.addEventListener("keydown", function(e){
            if(e.keyCode == 13) {
              addDefaultScheme(e.target);
            }
          });
        });
      });
    
    </script>
    

    I wish browsers would implement this themselves, but in the mean time you can use this bit of JS to provide a bit better user experience when asking your users for URLs.

    Portland, Oregon • 56°F
    3 likes 2 replies
    #indieweb #websignin #indielogin
    Sun, Jun 3, 2018 7:50am -07:00
next

Hi, I'm Aaron Parecki, co-founder of IndieWebCamp. I maintain oauth.net, write and consult about OAuth, and am the editor of several W3C specfications. I record videos for local conferences and help run a podcast studio in Portland.

I wrote 100 songs in 100 days! I've been tracking my location since 2008, and write down everything I eat and drink. I've spoken at conferences around the world about owning your data, OAuth, quantified self, and explained why R is a vowel. Read more.

Follow
  • Okta Developer Advocate
  • IndieWebCamp Founder
  • W3C Editor
  • Stream PDX Co-Founder
  • backpedal.tv

  • W7APK
  • ⭐️ Life Stack
  • All
  • Articles
  • Bookmarks
  • Notes
  • Photos
  • Replies
  • Reviews
  • Sleep
  • Travel
  • Contact
© 1999-2019 by Aaron Parecki. Powered by p3k. This site supports Webmention.
Except where otherwise noted, text content on this site is licensed under a Creative Commons Attribution 3.0 License.
IndieWebCamp Microformats Webmention W3C HTML5 Creative Commons