Измените входной текст на обычный текст при размытии и возможности редактирования jQuery

Я создаю форму, в которой я исключаю использование кнопки сохранения. Форма состоит из текстовых полей ввода и текстовых полей. После того, как пользователь вводит данные в поле ввода, я хочу вызвать функцию onBlur и изменить ввод на диапазон, содержащий информацию, введенную пользователем.

Я также хочу иметь возможность редактировать эту информацию, поэтому, если пользователь нажмет на вновь созданный диапазон с текстом, он вернется в поле ввода с текущей информацией для их редактирования.

Для справки, я хочу иметь функциональность, очень похожую на редактирование названия фотографии на Flickr.

Если возможно, я также хотел бы, чтобы текстовое поле отображало «сохранение ...» в течение полсекунды после размытия, чтобы отразить взаимодействие с сервером.


jquery onblur onfocus
person e_known    schedule 10.03.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Почему бы не создать стиль CSS для :focus для ввода, чтобы он выглядел как текстовое поле, и стиль CSS в противном случае, чтобы он выглядел как встроенный текстовый элемент?

input.ez-edit {
    display: inline;
    padding: 0;
    background-color: transparent;
    border-style: none;
    color: inherit;
    font-size: inherit;
}

input.ez-edit:hover {
    text-decoration: underline;
}

input.ez-edit:focus {
    display: inline-block;
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
}

input.ez-edit:focus:hover {
    text-decoration: none;
}
person strager    schedule 10.03.2010
comment
Хорошая идея. Даст ему спину. Однако мне все еще нужно создать функцию jquery, которая, если на входе есть текст, onBlur будет отображать сохранение... в течение одной секунды, а также создать заполнитель для отправки информации на сервер. - person e_known; 10.03.2010
comment
@eknown, хороший момент, возможно, это причина поместить это в таблицу стилей для Javascript. - person strager; 10.03.2010

arrow_upward
1
arrow_downward

Я поэкспериментировал с этим на основе предложений @strager и составил следующий превосходно функциональный код

jQuery:

$(":text[value='']").addClass('empty');
            $(":text[value>='']").removeClass('empty');
            $('.ez-edit').blur(function() {
                if ($(this).val().length >= 0) {
                    $(this).removeClass('empty');
                 } 
                 if ($(this).val().length <= 0) {
                    $(this).addClass('empty');
                 }
            });

и CSS:

 input.ez-edit {
    font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;
    font-weight:bold;
    display: inline;
    padding:5px 8px 5px 2px;
    background-color: transparent;
    border-style: none;
    border-top: 1px solid #cdcdcd;
    color: inherit;
    font-size: inherit;
}

input.ez-edit:hover {
    text-decoration: underline;
    /* following "pencil" img from: http://enon.in/6j */
    background:url(../images/pencil.gif) no-repeat right #ffffdc; 
    border-style:1px hidden;
    border-top:1px solid #fff;
    border-right-color:#fff;
    border-bottom-color:#fff;
    border-left-color:#fff;
}

input.ez-edit:focus, input.ez-edit:focus:hover {
    display:inline-block;
    border:1px solid #4d4d4d;
    font-size:12px;
    background-color:#FFFFDc;
    color:#333;
    font-weight:normal;
}
person e_known    schedule 15.03.2010

arrow_upward
0
arrow_downward

Я точно не знаю функцию на Flickr, о которой вы говорите, но также подумайте о том, чтобы вообще не менять тип ввода, а только его стиль. Гораздо проще и выполнимо без возни с DOM. Настройка, как

background-color: white;
border-color: transparent;

сделал бы ввод текста похожим на диапазон.

Недостатком этого является то, что ввод текста, отличный от <span>, всегда имеет фиксированную ширину.

person Pekka    schedule 10.03.2010
comment
Как вы сказали, недостатком является фиксированная ширина, что является одной из основных причин, по которой я подумал о переключателе DOM. Кроме того, если в текстовом вводе было много текста, как он будет действовать, если фон скрыт. Я попробую и посмотрю, применимо ли это предложение в моем сценарии. Спасибо. - person e_known; 10.03.2010