Edited at

[IE8] input[readonly]にテキスト入力カーソルを表示させない

More than 3 years have passed since last update.

某案件で

(゚σ ゚)<inputにカーソル出すなよ~IE8で出てるぜ~

って言われたので、色々調べていたのですが、これ結構対応が面倒でした。

※以下、jQueryを使った記述になっています。

■ 最初のコード

<input type="text" readonly="readonly">

<script type="text/javascript">
$('input[readonly="readonly"]').on('focus', function(){
$(this).blur();
});
</script>

これだと、inputをクリックした時にカーソルが一瞬でてしまうのでした。

(ま、いっか、どうせ操作できるわけじゃないし。と思って出したら突っ込まれた、というわけですね。)

こちらとか(http://d.hatena.ne.jp/uusshmhmba/20100830/p6)

こちら(http://tm.root-n.com/programming:javascript:etc:lie_readonly_noselect)

の情報を参考にさせてもらいつつ、改修したソースが以下。

■ こんなんなりました

<input type="text" readonly="readonly">

<script type="text/javascript">
$('input[readonly="readonly"]').on('mousedown keydown', function(){
var $target = $(this);
$target.attr('disabled', 'disabled');
setTimeout(function(){
$target.removeAttr('disabled');
}, 1);
});
</script>

なんともsetTimeoutとか、いちいちdisabledにしてるあたりが気持ち悪いですね。ええ。

とりあえず、動いたのでさらしておきます。

ちょっとしかテストしてないので、おかしな動きしたらごめんなさい。