Skip to content

Instantly share code, notes, and snippets.

View YaoKaiLun's full-sized avatar
🎯
Focusing

yaokailun YaoKaiLun

🎯
Focusing
View GitHub Profile
@mklabs
mklabs / pre-commit
Created November 15, 2011 17:28
run jshint as git/hg hooks, NO COMMIT IF NO LINT FREE.
#!/usr/bin/env node
// todo: try to require jshint here, instead of spawning process, then fallback to spawning process.
var jshint = nrequire('jshint');
if (jshint) return process.exit(0);
// jshint not installed locally, spawn process instead.
// basically the same, but less pretty.
var exec = require('child_process').exec;
@lovasoa
lovasoa / UTF8byteLength.js
Created April 27, 2014 23:23
Compute the length in bytes of a javascript string, when encoded in UTF8
function byteLength(str) {
// returns the byte length of an utf8 string
var s = str.length;
for (var i=str.length-1; i>=0; i--) {
var code = str.charCodeAt(i);
if (code > 0x7f && code <= 0x7ff) s++;
else if (code > 0x7ff && code <= 0xffff) s+=2;
if (code >= 0xDC00 && code <= 0xDFFF) i--; //trail surrogate
}
return s;
@twxia
twxia / getScrollableParent.js
Created January 5, 2018 03:41
Get Scrollable Parent
function getScrollParent(node) {
const isElement = node instanceof HTMLElement;
const overflowY = isElement && window.getComputedStyle(node).overflowY;
const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
if (!node) {
return null;
} else if (isScrollable && node.scrollHeight >= node.clientHeight) {
return node;
}

iOS restrictions re: bringing up the keyboard on programmatic focus

I can't find exact specifications on this, but it seems that iOS restricts bringing up the keyboard via programmatically focusing on <input>. It only brings up the keyboard in response to explicit user interaction.

  1. iOS focus on input field only brings up keyboard when called inside a click handler.
  2. It doesn’t work if the focus is async.

This presents a curious problem when you want to autofocus an input inside a modal or lightbox, since what you generally do is click on a button to bring up the lightbox, and then focus on the input after the lightbox has been opened. Without anything fancy, it actually works ok. The problem shows up when you try to add something fancy like a setTimeout or a promise.then(). I don't know why people would want to use a setTimeout here, but waiting for a promise is actually a pretty common use case. E.g. we try to batch dom manipulations like getting a lightbox to show up inside `requestAnimati