HTML5のautocomplete機能でキーワード候補を表示

以下だけでキーワード候補が出るinputが作れる

<input type="text" name="hoge" autocomplete="on" list="hoge">
<datalist id="hoge">
<option value="カレー">
<option value="寿司">
<option value="dark">
<option value="wing">
<option value="力">
</datalist>

右側にプルダウン的なものが出てくるんでクリックすると全部表示

f:id:hoge:20150509170633p:plain

一文字入れるとそれに先頭がマッチするキーワードが出てくる

f:id:hoge:20150509170709p:plain

日本語でもいけるぞ

f:id:hoge:20150509170733p:plain

ひらがなとカタカナの微妙なのはいけない

f:id:hoge:20150509170750p:plain

漢字でもいける

f:id:hoge:20150509170824p:plain

JSとかで候補書き換えれば現在の入力状態に適したものを動的に追加したり表示したりできるかもしれんが要検証だな。試してみた人がいたら教えてくれ。

jQueryで上に移動とか下に移動とかリストの並び替えをする

こういうリストがあったとして並び替えなんてとてつもなく難しそうに思えるかもしれないけど、じつはすごい簡単だから説明してあげる♡

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

こういう感じ。全てのliを回していって全部にclickイベントを付与する。それぞれのliはクリックしたら自分自身の隣の要素を取得して、隣の要素の手前に自分自身を追加する。こうするとコピーとかされるわけではなくて移動されるというわけ。

$('ul li').each(function() {
$(this).click(function() {
$(this).prev().before(this);
});
});

これを実行するとliをクリックすると上の要素の上に移動する。うまい具合にトリガーを設置していけば、上矢印ボタンとかで上に移動させたり、next()使って下に移動させたりできる。

jQueryのremoveClass()は全てのclassを削除できる

jQueryremoveClass()で何も指定しなければ全てのclassを削除してくれるらしい

$('#editor').removeClass();

いつも以下みたいなことをやっていた

element.className = '';

まあこれでも良いんだろうけど、jQuery使ってる時はjQueryで取得したオブジェクトから生のelementを取り出してってやってたのでかっこ悪かったから助かった。

JavaScriptでShift+Enterで処理を実行する

Shift+Enterの時だけ処理を実行するにはe.shiftKeye.keyCodeを組み合わせるだけのようだ。ここでは面倒なのでjQueryを使ってみた。

$('#text').keydown(function(e){
if (e.shiftKey && e.keyCode === 13) {
console.log('shift+enter');
}
});

Enterに対してデフォルトのイベントが設定されていて、その処理を無効化したい時はreturn falseを書き足す。特にイベントが設定されていないのならreturn falseは必要ない。

Thanks

qiita.com

textareaとかでのタブでの移動を無効化する

textareaに関わらずタブでフォームとか移動できると思うんだけど、あえてこれを無効化したいとか、無効化して何かのイベントを追加したいって時はこうする。jQuery使ってみたけど、jQueryじゃなくても簡単にできるよ。

$('#text').keydown(function(e){
return e.keyCode !== 9;
});

このコードはタブキーじゃない限りtrueを返して、タブキーになったらfalseを返すっていうシンプルなものだけど、その間に処理をはさみたいならこれをif文で囲ってやってごにょごにょすればおっけー。

tableの各セルをtable-layout: fixedを使って自動で揃える

このようになっているセルがあるとして

f:id:hoge:20150509165148p:plain

<table class="table">
<thead>
<tr>
<th>見出し</th>
<th>見出しです</th>
<th>見出しです2</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル</td>
<td>セルです</td>
<td>セルです2</td>
</tr>
<tr>
<td>セル</td>
<td>セルです</td>
<td>セルです2</td>
</tr>
</tbody>
</table>

table-layout: fixedを使うとこうなる

f:id:hoge:20150509165702p:plain

<table class="table" style="table-layout: fixed;">
<thead>
<tr>
<th>見出し</th>
<th>見出しです</th>
<th>見出しです2</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル</td>
<td>セルです</td>
<td>セルです2</td>
</tr>
<tr>
<td>セル</td>
<td>セルです</td>
<td>セルです2</td>
</tr>
</tbody>
</table>

JavaScriptでGETパラメータを取得する

JavaScriptでGETパラメータを取得してみる。IE対応などを考えていないのであしからず。仕組み的には&で分割したものをループで回し、=でキーと値を分割してハッシュに保存する。

var params = {};
location.search.substring(1).split('&').filter(function(param) { return param !== ''; }).forEach(function(param) {
params[param.split('=')[0]] = decodeURIComponent(param.split('=')[1]);
});
console.log(params);

こんなURLがあったとして

index.html?title=test&value=&key

上のコードを実行すると

Object {title: "test", value: "", key: "undefined"}

このような結果が得られる。古いブラウザとかでは動かないと思うけど、動かすならちょっと手を加えれば行けると思う。

var Request = function() {};
Request.getParam = function(key) {
return Request.getParams()[key];
};
Request.getParams = function() {
var params = {};
location.search.substring(1).split('&').filter(function(param) { return param !== ''; }).forEach(function(param) {
params[param.split('=')[0]] = decodeURIComponent(param.split('=')[1]);
});
return params;
};

私のコードの一部なんだけどこういう風にすればまとめて受け取れるし、key指定で受け取ることもできるだろう。上で何でも無い無名関数突っ込んでるけど、もともとprototypeで色々やってたコードの一部なので許してにゃん。

JavaScriptのquerySelector()とquerySelectorAll()でCSSセレクタでelementを抜き出す

JavaScriptdocument.querySelector()を知ってるか。jQueryみたいにCSSセレクタを書いてelementを取得できる。単一のelementを取得するならdocument.querySelector()で、複数のelementを取得するならdocument.querySelectorAll()だそうだ。さっそく検証してみる。

<div class="container">
<div id="test">
</div>
</div>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

document.querySelector()を使った例

console.log(document.querySelector('.container #test'));
console.log(document.querySelector('.test'));
console.log(document.querySelector('ul li'));

一つでも複数でも結果はひとつ

div#taiwa-area
<span class="test"></span>
<li>test</li>

document.querySelectorAll()を使った例

console.log(document.querySelectorAll('.container #test'));
console.log(document.querySelectorAll('.test'));
console.log(document.querySelectorAll('ul li'));

一つでも複数でも結果は配列

[div#taiwa-area, item: function]
[span.test, span.test, span.test, item: function]
[li, li, li, item: function]

jQueryのfindでもいいんだけど、findだけ利用したいならこれを使うのがいいねえ