如何創建CSS類以使輸入字段為只讀

Question

我想創建一個CSS類以使輸入字段為只讀。

這是我的嘗試：

 <style>
 .enableInput input[readonly] {
  color: #CB000F;
 }
</style>
<script>
function changeCss()
{
$("#desg").addClass("enableInput input");
}
</script>
</head>
FirstName:<input type="text" name='fname' id='fname' onBlur="changeCss();">
Designation:<input type="text" name='desg' id='desg' value='Software Engr'>
</html>

Answer 1

您無需使用CSS做任何事情。 html輸入中已經存在一個只讀屬性：

<input type="text" name="country" value="Norway" readonly>

在這里查看更多

沒有這樣的CSS屬性可以簡單地將輸入設為只讀，但是在此問題中 ，@ James Donnelly提供了一種解決方法來實現：

.enableInput{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;          
}

Answer 2

是的，您可以使用：disabled偽類，例如

input.myClass:disabled {
/* style declaration here */

}

或者您可以使用此處建議的解決方案

Answer 3

你只能在jQuery中做到

function changeCss()
{ 
$('#desg').prop('disabled', true);
}