如果第一个输入最初为空,则在keyup上的2个输入上使用相同的值

时间:2015-04-17 15:32:51

标签: javascript jquery dynamic input

我在表单名称和公司中有2个字段,我希望Name在键入时动态获取公司值(仅当Name开始输入公司时名称为空)并且我找不到最佳方法来实现此

例如,HTML是:

<form>
    ...
    <input type="text" id="Name" name="Name" value="">
    <input type="text" id="Company" name="Name" value="">
    ...
</form>

我试过了:

$('#Company').on('keyup', function(){
    var str = $('#Company').val();
    str = str.substring(0, str.length - 1);

    if($('#Name').val().length <= 0 || $('#Name').val() == str){
        $('#Name').val($('#Company').val());
    }
});

并且它在某种程度上有效,如果您输入太快,它会停止假设#Name#Company在最后keyup之前具有相同的值

我还考虑过在公司blur上做,但它可能会有效,但这不是我想要实现的用户体验。

使用Angular.js或类似的东西可能会更容易,但现在使用它不是一种选择。

1 个答案:

答案 0 :(得分:3)

像这样的东西,在输入名称字段时添加一个被删除的类,否则从公司字段复制第一个字符后,长度检查将失败。

&#13;
&#13;
$('#Name').addClass('empty').on('input', function() {
    $(this).toggleClass('empty', this.value.trim().length === 0);
});

$('#Company').on('input', function() {
    $('#Name.empty').val(this.value);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    Name : <input type="text" id="Name" name="Name" value=""><br>
    Comp : <input type="text" id="Company" name="Name" value="">
</form>
&#13;
&#13;
&#13;