是否可以將樣式應用於表單字段的值？

Question

我有一個分配給它的價值屬性一些文本，表格輸入標籤：

<input type="text" name="firstName" value="First Name*" /> 

由於這是一個必填字段，我怎麼在結束樣式星號「名字*」的字符串是紅色的顏色？這甚至可能嗎？...你如何設計預填充表單域的值？

謝謝。

Answer 1

我不認爲你可以將一個角色設置爲紅色，但是你可以將整個字符串設置爲紅色。

我可能會做設置的星號的輸入框和風格外就這樣

<input ...value="FirstName"><span style="color: #FF0000;">*</span> 

Answer 2

我認爲你正在做這個比較複雜，那麼它應該。可能有一種使用JavaScript或jQuery的方式，但我認爲這是矯枉過正。

我只是把它放在盒子的外面，並在<span>標籤內設計它。

Answer 3

不，這是不可能的。你必須假裝它。

但是，這就是<label>的！

<label>First Name* <input name=firstName required></label> 

Answer 4

即使有可能，這也不是一個好習慣。數據應始終與表示分離。除了需要發佈的數據之外，您不需要其他任何內容。

如果出現錯誤，例如使用jQuery解決方案，只需向後置輸入字段分配一個類，這將是一個不錯的主意。使輸入框內的文本變爲紅色，在輸入框周圍繪製紅色邊框等。

Answer 5

如果您使用asp.net，爲什麼不使用必需的字段驗證器控件並讓它爲您完成工作。

Answer 6

與其將*添加到字段中，我會建議通過修改通過CSS和jQuery/JavaScript的元素樣式來表示必填字段。

工作例如：http://jsfiddle.net/wstGQ/

CSS：

input { 
color: #ccc; 
} 
.required { 
color: #FF0000; 
border: 1px solid #FF0000; 
} 

的jQuery：

$('input').focus(function(){ 
    var obj= $(this); 
    var oldVal = obj.val(); 

    obj.blur(function(){ 
     if(obj.val() == oldVal){ 
     obj.val('Please enter a valid option').addClass('required'); 
     }else{ 
     obj.removeClass('required'); 
     } 
    }); 
});