TopJavaScript > 2013年8月
2013年8月29日

JavaScriptでフォーカスのあたっている要素を取得する「document.activeElement」

August 29,2013 1:55 AM
Tag:[, ]
Permalink

JavaScriptでフォーカスのあたっている要素を取得できるHTML5の新機能「document.activeElement」について紹介します。

document.activeElement

1.document.activeElementとは

document.activeElement」からの引用です。

document.activeElementは冒頭に記したとおり、フォーカスのあたっている要素を取得するためのdocumentプロパティで、HTML5で策定された新機能みたいです。

HTML5 - 6.5.3 Document-level focus APIsより

The activeElement attribute on DocumentHTML objects must return the element in the document that is focused. If no element in the Document is focused, this must return the body element.

仕様の原文では「documentオブジェクトのactiveElement属性は、フォーカスされているdocument内の要素を返却しなければならない。もしdocument内の要素がフォーカスされていなければ、body要素を返却しなればならない。」とあり、フォーカスされていないときの振舞いも決められています。

すべて確認できていませんが、フォーカスがあたったと認識されるのはフォーム関連の要素のようです。

次項のサンプルで試したところ、ブラウザによって若干振舞いが異なるようです。Firefox23ではすべて動作しました。

2.サンプル

document.activeElementが動作するサンプルを作ってみました。

document.activeElementサンプル
document.activeElementサンプル

フォームの部品をフォーカスすると、それぞれのid属性および選択したテキストを下に表示します。

3.document.activeElementの使い方

次のように記述すれば、現在フォーカスがあたっている要素を返却します。フォーカスがあたっていなければbody要素を返却します。

var current = document.activeElement;

jQueryのmouseupイベントと組み合わせると次のようになります。

<script>
$(function(){
    $("#foo").mouseup(function(e){
        var current = document.activeElement;
        $('#result').text( current.id );
    });
});
</script>
<input name="text_field" id="foo" type="text"  class="form" value="あいうえお" />
<div id="result"></div>

選択したテキストも取得する場合、activeElementで取得した要素に対し、selectionStartとselectionEndを適用します。

<script>
$(function(){
    $("#foo").mouseup(function(e){
        var current = document.activeElement;
        $('#result').text( current.id );
        var selection = 
            current.value.substring( current.selectionStart, current.selectionEnd );
        $('#text').text( selection );
    });
});
</script>
<input name="text_field" id="foo" type="text"  class="form" value="あいうえお" />
<div id="result"></div>
<div id="text"></div>

なお、上記のサンプルコードはフォーカスがあたっている要素のイベントで発火するので、body要素が返却されることはありません。

body要素の返却は2項のサンプルで確認してみてください(正しい実装でないかもしれませんが)。

4.参考サイト

参考サイトは以下です。ありがとうございました。

document.activeElement - Web API リファレンス | MDN
Comments [0] | Trackbacks [0]
2013年8月28日

入力フォームの全角・半角を勝手に変換してくれるJavaScript

August 28,2013 1:55 AM
Tag:[, ]
Permalink

入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。

全角・半角を変換

1.発端

入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。

というか、半角全角どちらでも良いという登録フォームを(多分)見たことがありません。

それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの?と思ったのが、作ったそもそもの発端です。

2.半角を全角に変換する仕組み

半角文字の文字コードから65248番目の文字コードが全角文字になるようです。

よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。

"ABC".replace( /[A-Z]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) + 65248);
});

3.全角を半角に変換する仕組み

全角から半角に変換するには、先程と逆に65248番手前の文字コードの文字に変換します。

"ABC".replace( /[A-Z]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
});

以下、実用的かどうか分かりませんが動作可能なサンプルを紹介します。

動作はWindows XP/Vista + Firefox/Chrome/IE9で確認しています。

4.フォーカスがはずれると半角⇔全角を変換するサンプル

2項・3項の仕組みを使って、テキストフィールドに文字を入力し、フォーカスがはずれると変換するスクリプトを作りました。

スクリプトでチェックしている以外の半角文字は全角になりません。また最初から全角の文字はそのままです。

jQueryの呼び出しは省略しているので適宜追加してください。

フォーカスがはずれると半角→全角に変換するサンプル
<script>
$(function(){
    $("#foo").change(function(){
        var str = $(this).val();
        str = str.replace( /[A-Za-z0-9-!"#$%&'()=<>,.?_\[\]{}@^~\\]/g, function(s) {
            return String.fromCharCode(s.charCodeAt(0) + 65248);
        });
        $(this).val(str);
    }).change();
});
</script>
<input type="text" id="foo" value="" />

こちらは全角から半角に変換するサンプルです。

フォーカスがはずれると全角→半角に変換するサンプル
<script>
$(function(){
    $("#foo").change(function(){
        var str = $(this).val();
        str = str.replace( /[A-Za-z0-9-!”#$%&’()=<>,.?_[]{}@^~¥]/g, function(s) {
            return String.fromCharCode(s.charCodeAt(0) - 65248);
        });
        $(this).val(str);
    }).change();
});
</script>
<input type="text" id="foo" value="" />

5.リアルタイムに半角⇔全角を変換するサンプル

2項・3項の仕組みを使って、テキストフィールドに文字を入力し、リアルタイムに変換するスクリプトを作りました。

リアルタイムに半角→全角に変換するサンプル
<script>
var han2zen = function(e) {
    var v, old = e.value;
    return function(){
        if( old != ( v = e.value ) ){
            old = v;
            var str = $(this).val();
            str = str.replace( /[A-Za-z0-9-!"#$%&'()=<>,.?_\[\]{}@^~\\]/g, function(s) {
                return String.fromCharCode(s.charCodeAt(0) + 65248);
            });
            $(this).val(str);
        }
    }
};
$(function(){
    $("#foo").each(function(){
        $(this).bind('keyup', han2zen(this));
    });
});
</script>
<input type="text" id="foo" value="" />

こちらは全角から半角に変換するサンプルです。

追記:各ブラウザで確認したところ、chromeでは候補文字の変換ができないようなのでこのサンプルはダメそうです。失礼致しました。

リアルタイムに全角→半角に変換するサンプル
<script>
var zen2han = function(e) {
    var v, old = e.value;
    return function(){
        if( old != ( v = e.value ) ){
            old = v;
            var str = $(this).val();
            str = str.replace( /[A-Za-z0-9-!”#$%&’()=<>,.?_[]{}@^~¥]/g, function(s) {
                return String.fromCharCode(s.charCodeAt(0) - 65248);
            });
            $(this).val(str);
        }
    }
};
$(function(){
    $("#foo").each(function(){
        $(this).bind('keyup', zen2han(this));
    });
});
</script>
<input type="text" id="foo" value="" />

もう少し手を加えて、たとえば長音「ー」を「-」にできればなおいいかもしれません。

6.送信時に半角⇔全角を変換するサンプル

ユーザに全角⇔半角の変換を見せずに、フォーム送信時に変換します。この方法が本来かと思います。

以下は半角→全角への変換コードです(動作サンプルは省略)。

<script>
$(function(){
    $("#test").submit(function(){
        var str = $("#foo").val();
        str = str.replace( /[A-Za-z0-9-!"#$%&'()=<>,.?_\[\]{}@^~\\]/g, function(s) {
            return String.fromCharCode(s.charCodeAt(0) + 65248);
        });
        $("#foo").val(str);
    });
});
</script>
<form method="post" id="test" action="foo.cgi">
<input type="text" name="foo" id="foo" value="" />
<input type="submit" value="送信" />
</form>

なおこの方法では、送信ボタンを押下した瞬間にテキストフィールドの文字が全角になるのが見えてしまうので、「type="hidden"」のinput要素に設定して送信する方がいいでしょう。

以下は「type="hidden"」のinput要素に設定するように修正したサンプルです。

<script>
$(function(){
    $("#test").submit(function(){
        var str = $("#foo").val();
        str = str.replace( /[A-Za-z0-9-!"#$%&'()=<>,.?_\[\]{}@^~\\]/g, function(s) {
            return String.fromCharCode(s.charCodeAt(0) + 65248);
        });
        $("#bar").val(str);
    });
});
</script>
<form method="post" id="test" action="foo.cgi">
<input type="hidden" name="bar" id="bar" value="" />
<input type="text" name="foo" id="foo" value="" />
<input type="submit" value="送信" />
</form>

フォーム送信で実行されるスクリプトも掲載しておきます。

#!/usr/bin/perl
 
use strict;
use CGI;
 
my $q = new CGI();
 
print $q->header(-charset=>"utf-8");
print "foo:".$q->param('foo') . "<br />";
print "bar:".$q->param('bar');
print $q->end_html;
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3