Question

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

编辑输入字段后，我的代码全部按预期工作，但我希望第一次点击/焦点显示值。

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

Answer 1

我从第一个小提琴中重新构建了一些代码。我抛弃了所有内联javascript和它的处理程序，onFocus, onBlur, onClick并替换为jQuery等价物，我想我得到了你想要的东西。

我使用jQuery的on()方法来做同样的事情来清理HTML。然后我在show()中使用了一个函数来触发其他一些函数。这可能更具程序性，但我认为它很好而且干净。

最后，我将修剪和子字符串提取到它自己的函数中，以便以后可以重用它。

A fiddle here以及以下代码：

$('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(); });中即可执行。

div中显示的修剪输入值

1 个答案: