是否可以設置輸入文本的值？

Question

我想知道是否可以設置輸入框的值的樣式... 例如 ：

<input class="textBox" type="text" rel="Inserisci il <span style=" value="Inserisci il <span style='color:#c83243;'>titolo</span> per l’URL personalizzato" name="ctl00$InsertDati1$txtTitolo">​​​​​​​​​​​​​​​​​​​​​​​​​​​​

但它不會渲染span元素。 有什么建議？

Answer 1

您可以在輸入框中設置內容樣式。 例如：

input{
    color:#ff0000;
    font: 1em/1.25em Arial, Helvetica, sans-serif;
}

另一方面，如果要使用占位符內容，可以在輸入標記上添加“占位符”屬性，如下所示：

<input type="text" class="textbox" placeholder='Title' />

請注意，占位符僅適用於支持HTML5和占位符屬性的瀏覽器。 如果你想要舊版瀏覽器的兼容性並且不介意使用一些JQuery，你可以使用像JQuery Watermark這樣的JQuery插件。

但是，您不能將span元素放在input標記的value中。

Answer 2

我認為使用帶div的contentEditable屬性是非常好的。 示例： https ： //jsfiddle.net/scjnwrnf/ <div contenteditable="true">This is a paragraph.<span style = "color:red"> It is editable. </span> Try to change this text.</div> <div contenteditable="true">This is a paragraph.<span style = "color:red"> It is editable. </span> Try to change this text.</div>然后您可以隱藏輸入元素並通過JavaScript將div中的純文本值放入輸入值。 謝謝penartur。

Answer 3

不，這是不可能的。

不要試圖濫用value屬性為表單控件提供<label> 。 （並且不要嘗試將rel屬性用於除鏈接之外的任何關系）。

相反，使用真正的<label> 。 如果您確實希望它出現在用戶要輸入的位置，那么：

1. 將輸入和標簽包裝在容器中（例如div）
2. 設置position: relative對於它，使其成為一個包含塊
3. 絕對將輸入定位在標簽頂部
4. 使輸入的背景顏色透明
5. 根據需要添加任何其他樣式

Answer 4

您可以設置整個輸入框內容的樣式，但不能將不同的樣式應用於其內容的不同部分。

例如<input style="color:red" value="all text is red"/>是可能的，但<input value="<span style='color:red'>this text is red</span>, and <span style='color:red'>this text is red</span>">不是。

嘗試查看具有contenteditable功能的多行框。

Answer 5

您可以做的一件事是使用輸入選擇器設置文本樣式，然后將其設置為不同的輸入：focus。 因此占位符文本看起來與某人輸入的文本不同。

Answer 6

是的，這是可能的..嘗試使用這樣的選擇器：

input[value^="Your Value"] {
    Your styles
}

Answer 7

嘗試使用Twitter的bootstrap包 - http://twitter.github.com/bootstrap - 你可以輕松實現轉角半徑，插入陰影，漂亮的懸停和焦點效果......你也可以下載“less-css”版本 - 真正靈活的工具 - 但它適用於更有經驗的用戶:)