70°F

Aaron Parecki

  • Articles
  • Notes
  • Photos
  • Improving the HTML type="url" Field

    June 3, 2018

    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
    #indieweb #websignin #indielogin
    Sun, Jun 3, 2018 7:50am -07:00
    3 likes 1 bookmark 4 replies 2 mentions
    • gRegor Morrill
    • Ryan Barrett
    • Marty McGuire
    • Chris Aldrich
    • Ryan Barrett snarfed.org
      Discovered a gotcha today: this script needs to be loaded synchronously, ie not with <script async>, since some browsers (eg Chrome) may fire the DOMContentLoaded event before async scripts are loaded. Just FYI!
      Mon, Jan 4, 2021 2:18pm -08:00
    • Ryan Barrett snarfed.org

      huh! odd. firefox 76 on mac definitely auto-fills my URL after i’ve typed just the first two letters of the domain. no http[s]:// needed.

      on a related note, this utility script from @aaronpk is invaluable for auto-adding http[s]:// to url fields when users type only their domain. i’ve used it in half a dozen projects now!

      Mon, May 25, 2020 3:32pm -07:00
    • Aaron Parecki aaronparecki.com
      Awesome! I am happy to make that code CC0!
      Thu, Jun 7, 2018 10:09pm -04:00
    • Ryan Barrett snarfed.org
      this is so so great! i’ve checked it into github; let me know if you want me to add a license notice. i’m adding it to oauth-dropins, Bridgy, and huffduff-video. thank you!
      Thu, Jun 7, 2018 5:55pm -07:00

    Other Mentions

    • Aaron Parecki aaronparecki.com
      How to Sign Users In with IndieAuth
      Tue, Apr 13, 2021 9:15pm -07:00
    • Aaron Parecki aaronparecki.com
      Better Default Security for IndieAuth Login Forms
      Mon, May 13, 2019 12:49am +02:00
Posted in /articles using quill.p3k.io

Hi, I'm Aaron Parecki, Senior Security Architect at Okta, and co-founder of IndieWebCamp. I maintain oauth.net, write and consult about OAuth, and participate in the OAuth Working Group at the IETF. I also help people learn about video production and livestreaming and dabble in product design.

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

  • Security Architect at Okta
  • IndieWebCamp Founder
  • OAuth WG Member

  • 🎥 YouTube Tutorials and Reviews
  • 🏠 We're building a triplex!
  • ⭐️ Life Stack
  • ⚙️ Home Automation
  • All
  • Articles
  • Bookmarks
  • Notes
  • Photos
  • Replies
  • Reviews
  • Trips
  • Videos
  • Contact
© 1999-2023 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
WeChat ID
aaronpk_tv