先日、ChromiumのUIが変更されたのであメログ。
HTML5の<input type="time">タグをChromiumで開くと🅧のクリアボタンが表示されていたのが、最近のアップデートで時計アイコンに変わっていた。
ワンクリックで時間をクリアできなくなり不便という要望が出たので、何とか回避してみました。
inputの隣に×アイコンを追加して、それがクリックされたらJavaScriptでinputの値を空にしています。
ESCキー押下でもクリアする様にしてます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>てすと</title>
<style type="text/css"><!--
.clear { color: gray; position: relative; left: -0.4em;}
@-moz-document url-prefix() {
.clear {
display: none;
}
}
--></style>
</head>
<body>
<input type="time" id="time0" name="time0">
<span id="clear0" class="clear">🅧</span>
<br>
<input type="time" id="time1" name="time1">
<span id="clear1" class="clear">🅧</span>
<script type="text/javascript"><!--
function downEscape() {
if( event.key == 'Escape') this.value = '';
}
function clickEscape() {
this.previousElementSibling.value = '';
}
function changePointerDefault() {
this.style.cursor = 'default';
}
document.getElementById( 'time0').addEventListener(
'keydown', downEscape, false
);
document.getElementById( 'clear0').addEventListener(
'click', clickEscape, false
);
document.getElementById( 'clear0').addEventListener(
'mouseover', changePointerDefault, false
);
document.getElementById( 'time1').addEventListener(
'keydown', downEscape, false
);
document.getElementById( 'clear1').addEventListener(
'click', clickEscape, false
);
document.getElementById( 'clear1').addEventListener(
'mouseover', changePointerDefault, false
);
--></script>
</body>
</html>
表示するとこんな感じ。
mozilla系のfirefoxでは今でもクリアボタンが表示されてるので、追加クリアボタンは非表示にしてます。
こんな感じ。
ワンライナーでHTMLとCSSとJavaScriptをごちゃまぜにするのがお好みな方は
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>てすと</title>
</head>
<body>
<input type="time" id="time0" name="time0" onKeyDown="if( event.key == 'Escape') this.value = '';">
<span id="clear0" class="clear" style="color: gray; position: relative; left: -0.4em;" onClick="this.previousElementSibling.value = '';" onMouseover="this.style.cursor = 'default';">🅧</span>
<br>
<input type="time" id="time1" name="time1" onKeyDown="if( event.key == 'Escape') this.value = '';">
<span id="clear1" class="clear" style="color: gray; position: relative; left: -0.4em;" onClick="this.previousElementSibling.value = '';" onMouseover="this.style.cursor = 'default';">🅧</span>
</body>
</html>
こちらをどうぞ。
