0

ID が不明な入力ボックスの数が不明です。入力ボックスをクリックして、トリミングされたバージョンの値を div に入力できるようにしたいと考えています。

JSFiddle

入力フィールドが編集されると、私のコードはすべて期待どおりに機能しますが、最初のクリック/フォーカスで値を表示したいと考えています。

これは私が書いたJS関数です。

JS

$('input').each(function() {
        var $tthis = $(this),
            defaultValue = $tthis.val();

 defaultValue = defaultValue.substring(keyed.indexOf("|") + 1);
 defaultValue = defaultValue.substring(0, defaultValue.length - 2)
        $("#target").html(defaultValue);    

});

HTML

<input
id='thistext$index'
type='text'
onclick='this.select();'
onfocus="
document.getElementById('show_hide').style.display='block';
document.getElementById('show_hide2').innerHTML = 'Copy this text into the wiki, it will display as: ';"
onblur="document.getElementById('show_hide').style.display='none';" value='&#91&#91;http://www.example.com/$dirArray[$index]&#124;$dirArray[$index]&#93;&#93;' />

<div id='show_hide'>
    <div id='show_hide2'>
    </div>
    <div id='target'>
    </div>
</div>
4

1 に答える 1

1

最初のフィドルからコードを少し再構築しました。私はすべてのインライン JavaScript とそのハンドラーonFocus, onBlur, onClickを破棄し、jQuery に相当するものに置き換えました。あなたが望むものを得たと思います。

jQuery のon()メソッドを使用して同じことを行い、HTML を大幅にクリーンアップしました。次に、関数を使用して、show()他のいくつかの関数をトリガーしました。これはもっと手続き的かもしれませんが、私はそれが素晴らしくてきれいだと思いました.

そして最後に、後で再利用できるように、トリミングと部分文字列を独自の関数に抽出しました。

ここにフィドルと以下のコード：

$('input').on('click', function() {
    var $input = $(this);
    $('#show_hide').show(function(){
        $('#show_hide2').text('Copy this text into the wiki, it will display as:');
        var text = trimInputValue($input);
        $('#target').text(text);
    });
});

function trimInputValue($input) {
    var text = $input.val();
    text = text.substring(text.indexOf("|") + 1);
    text = text.substring(0, text.length - 2);
    return text;
}

$('input').on('focusout', function() {
    $('#show_hide').hide();
});

今、あなたはどこにselect()行ったのだろうと思うかもしれません。心配する必要はありません。ただそれをあなたに含めるだけで、on('click', function(){ select(); });実行されるはずです。

于 2013-06-26T09:13:12.637 に答える