css для встроенного редактирования

Question

Я пытаюсь создать форму, которая имеет встроенное редактирование (с использованием jEditable), и я борюсь с CSS. Я хочу, чтобы это выглядело умеренно использовать, и там, кажется, две области, которые я пытаюсь очистить:

1. Как вы стиль калибровочный/текст, который «редактируемые», так что это было бы очевидно, пользователь, что он действительно доступен для редактирования?

2. Как вы можете сделать переход от span/text к элементу ввода разумным способом (какие стили css вы использовали бы)?

Благодаря

Answer 1

Я думал, что это может быть чисто вопрос CSS, но я вижу, что вы используете jeditable. Если я могу обратиться к нему с точки зрения css, это то, что я бы сделал.

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

// normal state 
.editable{ 
    border:2px dotted #CCC; 
} 

// hovered state 
.editable:hover{ 
    border:2px inset #f5f5f5; 
} 

При щелчке измените границу на твердый темный цвет и сделайте желтый фон.

// while editing 
textarea{ 
    border:1px solid #333; 
    background:#FFFFEB; 
} 

Here's an example, я надеюсь, что это по крайней мере, помогает с точки зрения стиля. Чисто мое мнение.

(редактирование: Кстати, мне пришлось взломать до пядь изменить в текстовое поле при нажатии (на демо), не судите мой JQuery)

Answer 2

DOM манипуляции для редактирования полей является плохим стилем. Вы заставляете браузер пересчитывать всю страницу.

Существует стандартный способ указывать браузер для изменения поведения редактируемого поля при взаимодействии пользователя с этим полем. Это контур Свойство CSS. Контур не влияет на положение или размер окна или других полей. Следовательно, отображение или подавление контуров не вызывает переполнения или переполнения.

Итак, почему гораздо лучше использовать CSS только для отображения пользовательских полей?

1. Пользователи уже придумали, как выглядит . У них будет серьезная проблема в их борьбе с поведением странной формы.
2. Есть стандартные элементы html для редактирования текста . Зачем вам нужно придумать что-то новое? Это так важно?
3. Современные браузеры могут изменять внешний вид поля внешний вид. Также они могут использовать системные элементы, цвета и т. Д.

Итак, если вы попытаетесь показать пользователю, что это поле доступно для редактирования, просто сделайте его стандартным.

В любом случае, вы можете добавить свои собственные дополнительные правила, чтобы изменить внешний вид поля в соответствии с дизайном сайта. Например, у меня есть used outline property with :hover and :focus pseudostates и изменить фон по умолчанию.

И продублируйте (CSS только):

.editor 
{ 
    width: 80%; 
    height: 100px; 
} 
.editor:hover 
{ 
    outline: 1px solid #ffd700; 
} 
.editor:focus 
{ 
    outline: 1px solid #ffffe0; 
    background: #ffffe0; 
}