3

我正在尝试制作一个具有内联编辑(使用 jEditable)的表单,并且我正在努力使用 CSS。我希望它看起来适度可用,并且似乎有两个方面我正在尝试清理:

  1. 您如何设置“可编辑”的跨度/文本样式,以便用户可以明显看出它确实是可编辑的?

  2. 你如何以合理的方式从跨度/文本转换到输入元素(你会使用什么 css 样式)?

谢谢

4

2 回答 2

3

我认为这可能是一个纯粹的 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;
 }

这是一个示例,我希望这至少从样式的角度有所帮助。纯粹是我的看法。

(编辑:顺便说一句,单击(在演示中)时,我不得不修改 span 以更改为 textarea,不要判断我的 jquery!)

于 2010-12-16T08:05:52.113 回答
1

可编辑字段的 DOM 操作是一种糟糕的风格。您强制浏览器重新计算所有页面。

当用户与该字段交互时,有一种标准方法可以让浏览器更改可编辑字段的行为。它是大纲CSS 属性。轮廓不影响框或任何其他框的位置或大小。因此,显示或抑制轮廓不会导致回流或溢出。

那么为什么只使用 CSS 来显示用户可编辑的字段会更好呢?

  1. 用户已经习惯了字段的外观。他们在与奇怪形式的行为作斗争时会遇到严重的困难。
  2. 文本编辑有标准的 html 元素。为什么你需要发明一些新东西?有那么重要吗?
  3. 现代浏览器可以自行更改字段的外观。他们还可以使用系统元素、颜色等。

因此,如果您尝试向用户显示该字段是可编辑的,只需将其设为标准即可。

无论如何,您可以添加自己的附加规则来更改字段的外观以对应站点设计。例如,我将大纲属性与 :hover 和 :focus 伪状态一起使用并更改默认背景。

并复制(仅限 CSS):

.editor
{
    width: 80%;
    height: 100px;
}
.editor:hover
{
    outline: 1px solid #ffd700; 
}
.editor:focus
{
    outline: 1px solid #ffffe0; 
    background: #ffffe0;
}
于 2010-12-16T11:58:34.357 回答