0

我有未知数量的 ID 未知的输入框。我希望能够单击一个输入框并让一个修剪版本的值填充一个 div。

JSFiddle

编辑输入字段后，我的代码将按预期工作，但我希望在第一次 click/focus 时显示该值。

这是我写的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 回答