将span中的输入设置为一个元素

Question

我的Rails 3应用中有一个表单，它使用span作为占位符，位于input内的divs字段内。对于大多数表单字段，结构如下所示：

<div class="holds">
  <span class="holder">Placeholder</span>
  <input>Input</input
</div>

但是在一个字段中，我希望将实际的input包装在文本中，以便input字段像填充空白一样流动。所以呈现的HTML看起来像这样：

<div><span>It is supposed to <input id="foo" placeholder="ex: rain"> today</span></div>

然而，我在设置特定div的样式时遇到了麻烦，因此它是统一的。我希望div能够：

• span和input周围有一个一致的边框，但span左侧和右侧的input内没有边框。 （请参阅我的jsFiddle中的下文，我显然没有修复此问题。）
• 在div聚焦时，关注整个input。 （我在下面的jsFiddle中试过这个，但我的初学者状态限制了我。）
• 理想情况下，如果单击span，我还会将光标定位在输入内部。然而，这不是高优先级。

以下是我jsFiddle的链接。任何人都可以帮助我吗？

Answer 1

此演示可以满足您的需求：http://jsfiddle.net/jalbertbowdenii/akCsP/2/

我用标签替换了div，正确使用元素的好处之一是默认的用户代理行为：专注于标签自动神奇地关注其相关的表单控件，在这种情况下是输入。

不确定你希望如何在焦点上使用样式div，所以我只使用了输入的焦点样式