单击时将超链接替换为内联文本框

Question

我想在点击网页正文中的超链接时创建一个文本框。

场景：

用户访问该页面并被问到许多问题，他们可以选择回答任意数量的问题。为此，他们单击问题（其格式为链接，因此很明显您单击它），然后出现一个文本框。输入所需的答案并点击输入/聚焦等后，超链接将替换为结果文本。

我看到这个JSFiddle 来自this 问题，但它没有达到预期的效果。 （下面的代码 - 不是我的）

HTML

<div class="control-group">
    <label for="name" class="control-label">
        <p class="text-info">Saghir<i class="icon-star"></i></p>
    </label>
    <input type="text" class="edit-input" />
    <div class="controls">
        <a class="edit" href="#">Edit</a>
    </div>
</div>

JavaScript

$(document).ready(function() {
    $('a.edit').click(function () {
        var dad = $(this).parent().parent();
        dad.find('label').hide();
        dad.find('input[type="text"]').show().focus();
    });

    $('input[type=text]').focusout(function() {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').show();
    });
});

CSS

.edit-input {
    display:none;
}

Answer 1

您需要在使用 .text($(this).val()) 在 focusout 事件上显示之前更新您的标签标签内容：

$(document).ready(function() {
    $('a.edit').click(function () {
        var dad = $(this).parent().parent();
        dad.find('label').hide();
        dad.find('input[type="text"]').show().focus();
    });

    $('input[type=text]').focusout(function() {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').text($(this).val()).show();
    });
});

要让它在你需要的输入键上工作：

$('input[type=text]').keyup(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').text($(this).val()).show();
        e.preventDefault();
    }
});

您可以将所有这些链接起来：

$('input[type=text]').keyup(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').text($(this).val()).show();
        e.preventDefault();
    }
}).focusout(function() {
    var dad = $(this).parent();
    $(this).hide();
    dad.find('label').text($(this).val()).show();
});

为了保持干燥（不要重复自己），你最好将你的行为包装在一个函数中（它必须检测事件的种类才能得到类似的东西（没有测试）：

$('#youdbettergiveyourinputanidtoo').keyup(your_function).focusout(yourfunction);

...最后，如果您使用的是最新的 jQuery 版本，您可以这样做（使用 on() 函数）：

$('#youdbettergiveyourinputanidtoo').on('focusout keyup', function(e) {...});

（也没有测试，但你明白了）

也许你可以在 enter keyup 事件上触发一个 focusout 事件（参见 trigger() 函数）...很多解决方案。

祝你好运

Answer 2

所以我决定回答我自己的问题...

尽管我已经接受了 Flo 早些时候给我的答案，但我已经根据他的建议和我自己的修补来编辑我原来的 JSFiddle，以获得我想要的 原版效果。

这将实际上在单击时将链接替换为文本框（准备编辑），然后在您按下回车键或焦点移出时恢复为具有更新文本的链接文本框。

HTML

<div class="control-group">
    <input type="text" class="edit-input" id="tag"/>
    <div class="controls">
        <a class="edit-link" href="#" id="qa">Where does this song remind you of?</a>
    </div>
</div>

JavaScript

$(document).ready(function() {
    $('#qa').click(function () {
//        var dad = $(this).parent().parent();
//        dad.find('#tag').val($(this).text()).show().focus().select();
        $('#tag').val($(this).text()).show().focus().select();
        $('#qa').hide();
    });

    $('#tag').keyup(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) {

        $(this).hide();
        $('#qa').text($(this).val()).show();
        e.preventDefault();
    }
}).focusout(function() {

        $(this).hide();
        $('#qa').text($(this).val()).show();
});
});

CSS

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
    font-size: 16px;
}

.edit-input {
    display:none;
    color: #333;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    vertical-align: middle;
    height: 18px;
    border: 1px solid #333;
    width: 400px;
}

a.edit-link {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    vertical-align: middle;
    height: 18px;
    width: 400px;
}