Замените гиперссылку на встроенное текстовое поле при нажатии

Question

Замените гиперссылку на встроенное текстовое поле при нажатии

0

Я хотел бы создать текстовое поле, щелкнув гиперссылку в теле веб-страницы.

Сценарий:

Пользователь посещает страницу и задает несколько вопросов, они могут ответить на любое их количество. Чтобы сделать это, они нажимают на вопрос (который отформатирован как ссылка, поэтому ясно, что вы нажимаете на него), тогда появляется текстовое поле. При вводе желаемого ответа и нажатии кнопки ввода/включения и т.д. Гиперссылка заменяется полученным текстом.

Я видел этот JSFiddle, который был из этого вопроса, но он не достигает желаемого эффекта. (код ниже - не мой)

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;
}

Mike 17 дек. 2013, в 22:09

Источник

1

работает без изменений: jsfiddle.net/3r7qK
caramba 17 дек. 2013, в 21:01

Теги:

javascript

jquery

2 ответа

0

Поэтому я решил ответить на свой вопрос...

Несмотря на то, что я принял ответ, который Фло дал мне раньше, я с тех пор отредактировал свой оригинальный 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;
}

Mike 17 дек. 2013, в 23:03

Ещё вопросы

работает без изменений: jsfiddle.net/3r7qK

Flo · Accepted Answer · 2013-12-17T18-51-00.000Z

Вам нужно обновить содержимое тега метки, прежде чем показывать его, используя.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();
});

Чтобы остаться СУХОЙ (не повторяй себя), лучше обернуть поведение yout в функции (которая должна определить тип события, чтобы получить что-то вроде (не тестировалось):

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

... и, наконец, если вы используете недавнюю версию jQuery, которую вы можете сделать (с функцией on()):

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

(тоже не тестировал, но вы поняли)

Возможно, вы можете просто вызвать событие фокуса (см. Функцию триггера()) в событии ввода ключа... множество решений.

Удачи с этим

Спасибо, это может быть выполнено и после нажатия клавиши ввода?