Tags: mit

46

sparkline

Wednesday, August 26th, 2020

Submitting a form with datalist

I’m a big fan of HTML5’s datalist element and its elegant design. It’s a way to progressively enhance any input element into a combobox.

You use the list attribute on the input element to point to the ID of the associated datalist element.

<label for="homeworld">Your home planet</label>
<input type="text" name="homeworld" id="homeworld" list="planets">
<datalist id="planets">
 <option value="Mercury">
 <option value="Venus">
 <option value="Earth">
 <option value="Mars">
 <option value="Jupiter">
 <option value="Saturn">
 <option value="Uranus">
 <option value="Neptune">
</datalist>

It even works on input type="color", which is pretty cool!

The most common use case is as an autocomplete widget. That’s how I’m using it over on The Session, where the datalist is updated via Ajax every time the input is updated.

But let’s stick with a simple example, like the list of planets above. Suppose the user types “jup” …the datalist will show “Jupiter” as an option. The user can click on that option to automatically complete their input.

It would be handy if you could automatically submit the form when the user chooses a datalist option like this.

Well, tough luck.

The datalist element emits no events. There’s no way of telling if it has been clicked. This is something I’ve been trying to find a workaround for.

I got my hopes up when I read Amber’s excellent article about document.activeElement. But no, the focus stays on the input when the user clicks on an option in a datalist.

So if I can’t detect whether a datalist has been used, this best I can do is try to infer it. I know it’s not exactly the same thing, and it won’t be as reliable as true detection, but here’s my logic:

  • Keep track of the character count in the input element.
  • Every time the input is updated in any way, check the current character count against the last character count.
  • If the difference is greater than one, something interesting happened! Maybe the user pasted a value in …or maybe they used the datalist.
  • Loop through each of the options in the datalist.
  • If there’s an exact match with the current value of the input element, chances are the user chose that option from the datalist.
  • So submit the form!

Here’s how that translates into DOM scripting code:

document.querySelectorAll('input[list]').forEach( function (formfield) {
  var datalist = document.getElementById(formfield.getAttribute('list'));
  var lastlength = formfield.value.length;
  var checkInputValue = function (inputValue) {
    if (inputValue.length - lastlength > 1) {
      datalist.querySelectorAll('option').forEach( function (item) {
        if (item.value === inputValue) {
          formfield.form.submit();
        }
      });
    }
    lastlength = inputValue.length;
  };
  formfield.addEventListener('input', function () {
    checkInputValue(this.value);
  }, false);
});

I’ve made a gist with some added feature detection and mustard-cutting at the start. You should be able to drop it into just about any page that’s using datalist. It works even if the options in the datalist are dynamically updated, like the example on The Session.

It’s not foolproof. The inference relies on the difference between what was previously typed and what’s autocompleted to be more than one character. So in the planets example, if someone has type “Jupite” and then they choose “Jupiter” from the datalist, the form won’t automatically submit.

But still, I reckon it covers most common use cases. And like the datalist element itself, you can consider this functionality a progressive enhancement.

Wednesday, May 15th, 2019

A report from the AMP Advisory Committee Meeting – Terence Eden’s Blog

I completely agree with every single one of Terence’s recommendations here. The difference is that, in my case, they’re just hot takes, whereas he has actually joined the AMP Advisory Committee, joined their meetings, and listened to the concerns of actual publishers.

He finds:

  • AMP isn’t loved by publishers
  • AMP is not accessible
  • No user research
  • AMP spreads fake news
  • Signed Exchanges are not the answer

There’s also a very worrying anti-competitive move by Google Search in only showing AMP results to users of Google Chrome.

I’ve been emailing with Paul from the AMP team and I’ve told him that I honestly think that AMP’s goal should be to make itself redundant …the opposite of the direction it’s going in.

As I said in the meeting - if it were up to me, I’d go “Well, AMP was an interesting experiment. Now it is time to shut it down and take the lessons learned back through a proper standards process.”

I suspect that is unlikely to happen. Google shows no sign of dropping AMP. Mind you, I thought that about Google+ and Inbox, so who knows!

Good point!

Wednesday, April 17th, 2019

Limitation Breeds Creativity - Cassie Evans [Bytes Conf 2019] - YouTube

Cassie’s terrific talk from Bytes Conf, featuring some wild CSS experiments.

(Conference organisers—you want Cassie on your stage!)

Limitation Breeds Creativity - Cassie Evans [Bytes Conf 2019]

Friday, March 15th, 2019

Friday, February 1st, 2019

Limiting JavaScript? - TimKadlec.com

Following on from that proposal for a browser feature that I linked to yesterday, Tim thinks through all the permutations and possibilities of user agents allowing users to throttle resources:

If a limit does get enforced (it’s important to remember this is still a big if right now), as long as it’s handled with care I can see it being an excellent thing for the web that prioritizes users, while still giving developers the ability to take control of the situation themselves.

Monday, January 7th, 2019

Resolution

The start of a new year is the traditional time for making resolutions. I’ve done it in the past. Now I’m not sure it’s such a good idea.

Think about it. It’s January. The middle of winter. It’s cold outside. The days are short. The only seasonal foods available are root vegetables and brassicas. Considering this lack of sunlight and fruit, it seems inadvisable to try to also deny yourself the intake of sugar, alcohol, meat, carbohydrates or gluten. You’re playing with a stacked deck. And then when inevitably, in the depths of winter, you cave in and pour yourself a glass of wine or indulge in a piece of cake, you now have the added weight of guilt on your shoulders to carry through the neverending winter nights.

Of course not all resolutions involve the abnegation of material pleasures. Many a new year’s promise involves a renewed commitment to work, exercise, or culture-vulching. But again, is this really the best time of year to do that? Given the weather, are you really in the best frame of mind to tackle such a tall order?

No, I don’t think I’ll be making any new year’s resolutions. If anything, this is the time of year when I won’t feel bad about having a pint of ale or a comforting stew. It’s also the time of year when I’m going to cut myself more slack if I’m not exercising diligently or working hard. Let’s face it, just making it through these months intact should be achievement enough.

If I were to make a resolution, it would only be that, come summertime, I’ll take stock and maybe make a commitment to cut down on some guilty pleasure or increase some noble activity then. A midsummer’s resolution, if you will.

Until then, I’ll be cosying up and indulging in any bodily comforts I crave. My resolve to do that is strong.

Friday, December 28th, 2018

Malicious AI Report

Well, this an interesting format experiment—the latest Black Mirror just dropped, and it’s a PDF.

Sunday, February 11th, 2018

Brendan Dawes - Using a Git Repo to create a physical document of the work

There’s something quite Bridlesque about these lovely books that Brendan is generating from git commits.

Monday, November 20th, 2017

Happier HTML5 Form Validation - daverupert.com

Dave uses just a smidgen of JavaScript to whip HTML5’s native form validation into shape.

Instead of being prescriptive about error messaging, we use what the browser natively gives us.

Thursday, August 3rd, 2017

Attachment #317095 for bug #175115

I’ve never been so excited by a single diff in a JSON file.

Service workers are coming to Safari.

Monday, July 3rd, 2017

Social Cooling

If you feel you are being watched, you change your behavior. Big Data is supercharging this effect.

Some interesting ideas, but the tone is so alarming as to render the message meaningless.

As our weaknesses are mapped, we are becoming too transparent. This is breeding a society where self-censorship and risk-aversion are the new normal.

I stopped reading at the point where the danger was compared to climate change.

Tuesday, January 31st, 2017

100 Days Of Open Source (2017) — Joschi Kuphal · Web architect · Nuremberg / Germany

Joschi is documenting his commitment to “contribute at least one meaningful commit a day to a public Open Source project or a similar community effort.” So far it’s a really nice mix of coding and face-to-face activities.

Friday, January 6th, 2017

Making stuff from scratch in the wild

Making fire, building shelter, throwing spears …all useful post-apocalyptic skills documented on the primitive technology blog.

Primitive technology is a hobby where you make things in the wild completely from scratch using no modern tools or materials. This is the strict rule. If you want a fire- use fire sticks, an axe- pick up a stone and shape it, a hut- build one from trees, mud, rocks etc. The challenge is seeing how far you can go without modern technology. If this hobby interests you then this blog might be what you are looking for.

Wednesday, November 23rd, 2016

Smithsonian 3D Apollo 11 Command Module

This is so wonderful! A 3D fly-through of the Apollo 11 command module, right in your browser. It might get your fan whirring, but it’s worth it.

Click through for lots of great details on the interface controls, like which kinds of buttons and switches were chosen for which tasks.

And there’s this lovely note scrawled near the sextant by Michael Collins (the coolest of all the astronauts):

Spacecraft 107, alias Apollo 11, alias ‘Columbia.’ The Best Ship to Come Down the Line. God Bless Her.

Tuesday, July 12th, 2016

Saturday, June 25th, 2016

ISP’s are updating your site without your permission

One more reason to make the switch to HTTPS.

Progressive Web Apps Dev Summit | hiddedevries.nl

Hidde’s write-up of the Progressive Web App Dev Summit:

It was exciting to hear about the technologies, and to see that a lot of them already work on a great deal of platforms. Most of the major browser vendors expressed how much they liked the idea, so it is realistic to say support will increase in the short term. This, and the fact that all PWA techniques can be regarded as a ‘progressive enhancement’ (with some leniency as to what that term means), entails that we can build Progressive Web Apps today.

Hopefully, we will do so responsibly. Native apps really only work on their particular platforms. PWAs, in theory, can be built to work universally. For everyone with a web enabled device. This is awesome! Major browser vendors are behind the idea, and I think as developers we should be, too.

Wednesday, June 22nd, 2016

PWAs: The Panel (Progressive Web App Summit 2016) - YouTube

Here’s the video of the panel I moderated yesterday at the Progressive Web App Dev Summit. I had to get a bit Paxman at times with some of the more media-trained panelists.

PWAs: The Panel (Progressive Web App Summit 2016)

Friday, June 10th, 2016

Progressive Web App Dev Summit 2016 | Home

Google have asked me to moderate a panel on the second day of this event in Amsterdam dedicated to progressive web apps. Very brave of them, considering some of my recent posts.

Thursday, May 5th, 2016

IndieWeb Summit 2016 - Portland, Oregon

If you want to go to the Indie Web Summit on June 3rd to 5th (and you should), there’s a travel assistance fund:

If you are a member of a group that is typically underrepresented (e.g. if you are not straight, white, cis and male), and otherwise could not afford to travel to IndieWeb Summit on your own, an anonymous donor has established a $1000 fund to assist individuals from underrepresented backgrounds with travel and/or lodging costs for the Indieweb Summit in Portland.