1

IE9 で次の動作を作成したい:

テキストボックスをクリックすると、テキストボックスからテキストが選択されます。もう一度クリックすると、テキストの選択が解除されます。

このリンクから次のことを試しました: http://www.codingforums.com/showthread.php?t=105530

var x = 2;

function selectIt(obj)
{
    if (x % 2 == 0)
    {
        obj.select();
    }
    else
    {
        if (document.selection)
        {
            document.selection.empty();
            obj.blur();
        }
        else
        {
            window.getSelection().removeAllRanges();
        }
    }
    obj.focus();
    x++;
}

これも使用しました：http://jsfiddle.net/HmQxZ/1/

しかし、上記の解決策を複数のテキスト ボックスに適用すると、奇妙な動作が発生します。この種の問題にアプローチする最良の方法は何ですか。グローバル変数を使わずにこれを行うことは可能ですか?

アップデート：

フィドルは Chrome で動作します。ただし、IE9 では機能しません。IE9 では、テキストが選択されていますが、テキスト ボックスをもう一度クリックしても、テキストは選択解除または強調表示されません。Chrome では、2 回目のクリックでテキストの選択/強調表示が解除されます。

ありがとうございました。

4

4 に答える 4

3

複数のテキストボックスの問題は、x変数がグローバルであるということです。xテキストボックスごとに個別の変数が必要になります。

あなたは地図を使うことができます：

var x = {};

function selectIt(obj)
{
    var key = ... <-- get name (or id) of textbox from obj somehow to use as key in map
    if (!x.hasOwnProperty(key)) x[key] = 0;
    if (x[key] % 2 == 0)
    {
        obj.select();
    }
    else
    {
        if (document.selection)
        {
            document.selection.empty();
            obj.blur();
        }
        else
        {
            window.getSelection().removeAllRanges();
        }
    }
    obj.focus();
    x[key]++;
}
于 2012-09-14T08:45:24.927 に答える
0

これが完全なソリューションです。

デモ http://codebins.com/bin/4ldqp79

HTML

<div id="panel">
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
</div>

JQuery

$(function() {
    $("#panel input[type=text]").click(function() {
        $(this).select();
    });
});

CSS

input{
  display:block;
  border:1px solid #333;
  background:#efefef;
  margin-top:15px;
  padding:3px;
}

デモ http://codebins.com/bin/4ldqp79

于 2012-09-14T09:41:10.533 に答える
0

このデモを試す

デモ jQuery:

$(function(){
    $("input[type='Text']").on("click",function(){
     if (typeof this.selectionStart == "number") 
         this.select();
    });
  });
于 2012-09-14T08:56:19.783 に答える
0

これはChromeで機能します-jQueryにはトグルイベント機能がありますが、この場合は必要ありません

$('input').click(function() {
 // the select() function on the DOM element will do what you want
 this.select();
});

しかし、選択したいフィールドのタイプをスクリプトに伝えることをお勧めします

$("input[type=text], input[type=url]").click(function() {
  $(this).select(); // "this" is native JS 
});

<a href="http://jsfiddle.net/mplungjan/fU83Y/" rel="nofollow">デモ

于 2012-09-14T08:49:16.960 に答える