使文本輸入字段看起來禁用，但採取只讀操作

我有一個HTML輸入字段，我希望用戶能夠看到但不能編輯。如果我將該字段標記爲「禁用」，則不會與表單的其餘部分一起提交。如果我將其標記爲「只讀」，則其行爲與我想要的類似，但仍可啓用（至少在Chrome上）。使文本輸入字段看起來禁用，但採取只讀操作

基本上，我想輸入字段看起來像禁用的領域，但的行爲爲只讀字段。這可能嗎？

謝謝。

編輯：另外，如果我把它標記爲「只讀」，它仍然可以通過雙擊它，並選擇一些以前沒有改變其價值。

來源

2011-10-12 numegil

以下是解決方法：您已將輸入禁用在您想要的位置（僅用於顯示值），並具有您需要的具有名稱和值的隱藏輸入。

來源

2011-10-12 16:22:43 simoncereska

但請注意，這並不能防止篡改窗體。這只是看起來。所以看看[這個問題]（http://stackoverflow.com/questions/324477/in-a-django-form-how-to-make-a-field-readonly-or-disabled-so-that-it-cannot -be）以防止篡改。 –

很好，謝謝！ – numegil

雖然這可能不匹配其他禁用的跨瀏覽器/平臺的字段，但您可以使用css使其外觀儘管您想要。

<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/>

來源

2011-10-12 16:26:29 neurotik

這可以通過設計所有表單元素來完成。 –

我已經爲你添加了一個例子... – neurotik

@CharString，這是真的。 – neurotik

我曾與JSF類似的問題，其中一個隱藏的領域工作堅持我所需要的價值，但如果形式驗證失敗時提交的只讀或禁用輸入字段中的值將被清除。我發現了一種替代解決方案，它似乎能夠通過使輸入字段在技術上可編輯而優雅地工作，但是一旦它接收到焦點，就會通過模糊處理來防止編輯。儘管您可能不會在服務器端環境中遇到與使用JSF所做的相同的問題（即使僅從標記爲只讀的輸入字段中也不提交值），但您可能可以在您的情況下使用相同的技術，結果是你不需要單獨的隱藏字段來保存值。然而，像第二個答案一樣，它沒有解決將字段看起來爲禁用的問題，至少不是沒有一些額外的CSS代碼。

在JSF的代碼：成爲下面的HTML

<p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" />

：

<input id="entid" type="text" value="10003" onfocus="blur();" />

你可以看到更多的在這裏：How to persist JSF view parameters through validation

來源

2011-10-26 03:16:53

我知道這是得到回答，但希望給我的CSS例子。

因爲當我在尋找解決方案時，如何對輸入字段進行樣式設置，使其看起來像禁用了，我總是以輸入字段看起來像這樣。

隨着border-左&頂部有一個較深的顏色等，所以一個使用這個CSS代碼解決它。

input[readonly]{ 
    border-color: darkgrey; 
    border-style: solid; 
    border-width: 1px; 
    background-color: rgb(235, 235, 228); 
    color: rgb(84, 84, 84); 
    padding: 2px 0px; 
}

做了一個jsfiddle所以你們可以仔細看看。

它看起來不錯在Chrome，在其他瀏覽器，你需要升技修改顏色。就像在Firefox中一樣，你也需要改變顏色和背景顏色等。

background-color: rgb(240, 240, 240); 
color: rgb(109, 109, 109);

來源

2017-02-07 15:41:04 Devl11

使文本輸入字段看起來禁用，但採取只讀操作

回答

相關問題