Web notes

HTML/CSS

contenteditable与placeholder

<div id='textfield' contenteditable onblur='this.innerHTML = this.textContent'></div>

#textfield:empty::before {
    content: 'placeholder text'
}

上传文件

<div class='hidden'>
	<input id='upload-files' type='file' multiple oninput='upload(this.files); this.value = "";'>
</div>

.hidden {
    position: fixed;
    top: -999px;
}

input元素change事件与input事件

change: 失去焦点并且值改变才触发.
input: 立即触发.

在web应用程序中使用文件 - MDN

JavaScript

批量插入DOM元素

let fragment = document.createDocumentFragment();
...
fragment.appendChild(...);
...
document.body.appendChild(fragment);

Uint8Array与hex字符串的互转

function u8a2hex(u8a) {
    return [].map.call(u8a, b => b.toString(16).padStart(2, '0')).join('');
}

function hex2u8a(hex) {
    return new Uint8Array(hex.match(/[da-f]{2}/gi).map(h => parseInt(h, 16)));
}

下载文本

function download(text, name) {
    var a = document.createElement('a');
    var e = document.createEvent('MouseEvents');
    e.initEvent('click', false, false);
    a.download = name;
    var blob = new Blob([text]);
    a.href = URL.createObjectURL(blob);
    a.dispatchEvent(e);
}

fetch提交表单

let form = new FormData();
form.append('path', path);
form.append('files[]', file);

fetch('upload.php', {
    method: 'POST',
    body: form
});

将js对象转为URL

// 调用urlEncode(obj)
function urlEncode(obj, key) {
    var type = typeof obj;
    if (type === 'string' || type === 'number' || type === 'boolean') {
        return key+'='+encodeURIComponent(obj)+'&';
    } else {
        var ret = '';
        for (var i in obj) {
            var k = key == null ? i : obj instanceof Array ? key+'%5B'+i+'%5D' : key+'.'+i;
            ret += urlEncode(obj[i], k);
        }
        return key == null ? ret.slice(0, -1) : ret;
    }
}

iframe与父页面通信

// 父页面调用iframe函数
iframeId.contentWindow.foo();
// iframe调用父页面函数
window.parent.foo();

检查一个DOM元素是否取得焦点

dom === document.activeElement // dom is the target element

PHP