是否可以设置输入文本的值？

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元素value的的input标签.

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> 然后,您可以隐藏输入元素,并通过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 功能的多行框。