大家好！
今天要實作的是表單的輸入提示。
我們進入今天的主題吧！
const input = Felix('input[id]');
const status = [].slice.call(input).reduce(function (a, v) {
return (a[v] = true, a);
}, {});
input.on('focus', event);
input.on('blur', event);
function check(type, message) {
if (typeof type !== 'number' || type < 0 || type > 3) return;
const checker = Felix('#checker')[0];
const types = [null, 'normal', 'marked', 'urgent'];
checker.classList.remove(types[1], types[2], types[3]);
if (type === 0) return;
checker.classList.add(types[type]);
checker.textContent = message;
}
function event(e) {
if (e.type === 'blur') return check(0);
if (status[e.currentTarget.id]) return check(1);
}
<body>
<!-- ... -->
<div id="checker"></div>
</body>
範例連結製作中。
差不多也到尾聲了。
如果對文章有任何疑問，歡迎於下方提問和建議！
我是 Felix，我們明天再見！
iThome鐵人賽
看影片追技術