久しぶりにjavascriptのエントリで、ieのみで動くサンプルです。
あるフィールドはユーザからの直接入力をさせたくないけど、用意されたインターフェイスからはアイテムの追加ができて、アイテムを削除する際もアイテム単位で行いたい。ただ、フィールドのスタイルはテキストフィールドっぽい体裁で表示させたい。
なんてことを言われたのでやってみました。サンプルはユーザインターフェイスのところのみ記述していて、どこかへデータをポストしたいとかいった場合は、実際のアイテムのデータハンドリングを他で丁寧に行う必要があります。
動作サンプルはこちら
なんでこんなエントリを書いたのかというとcreateRangeの仕様がよくわからずに、すごいはまったからで、クリックした箇所から１アイテム分だけ反転したいというところで悩まされました。
createRangeで返されたオブジェクトにはmoveStartやmoveEndとかって言うメソッドが用意されていて、第１パラメータにcharacter / word / sentence / texteditという単位が渡せて第２パラメータにその数値が与えられるのですが、そのメソッドを使って泥臭くクリックされている箇所をアイテム単位で反転しようとしてたのですが、
var elem = range.parentElement(); range.moveToElementText( elem ); range.select();
これだけで良いらしい。createaRangeであれこれ検索してもなかなかやりたい事が出てこなくてすごい参った。のでポスト。
社内イントラのウェブシステム用なのでieだけ考えればよいってのは助かった。
ソース
<script>
var inst = {
selectElem : null,
itemFocus : function(){
var range = document.selection.createRange();
var elem = range.parentElement();
inst.selectElem = elem;
range.moveToElementText( elem );
range.select();
}
}
document.attachEvent( "onkeydown", function( event ){
if( event.keyCode == 46 && inst.selectElem != null ){
inst.selectElem.parentNode.removeChild( inst.selectElem );
}
});
document.attachEvent( "onclick", function( event ){
if( event.srcElement.id != null && event.srcElement.id.search( /gen*/g) != 0 ){
inst.selectElem = null;
}
});
window.onload = function(){
var elems = document.getElementsByTagName( "span" );
for( var idx in elems ){
elems[ idx ].onclick = inst.itemFocus;
}
}
</script>
<body>
<div style="border: 1px solid #ddd; padding: 0.5em 1em; background-color: #F6F6F6;">
<div>
<span id="gen1">ほげ;</span><span id="gen2">もげ;</span><span id="gen3" >ぴよ;</span><span id="gen4" >ふが;</span>
</div></div>
こちらの記事もどうぞ！！
