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（））在焦点事件上显示标签内容之前更新标签标记内容：

$(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();
});

为了保持DRY（不要重复自己）你最好把你的行为包裹在一个函数中（它必须检测事件的类型以获得类似的东西（没有测试）：

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

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

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

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

也许你可以在输入keyup事件上触发一个焦点事件（参见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;
}

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

2 个答案:

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