Изменить ввод текста на обычный текст на размытие и возможность редактировать jQuery - PullRequest
Новая
       24

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

1 голос
/ 10 марта 2010

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

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

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

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

Ответы [ 3 ]

1 голос
/ 10 марта 2010

Почему бы не сделать стиль 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;
}
1 голос
/ 15 марта 2010

Я поэкспериментировал с этим на основе предложений @ 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;
}
0 голосов
/ 10 марта 2010

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

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

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

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

...