在文本框後顯示圖像？

我需要顯示約6個文本框旁邊的圖像...我不想使用div標籤，因爲這些位置與IE/Firefox等不同。有沒有簡單的方法來顯示文本框旁邊的小圖像？比如使用：在css之後？在文本框後顯示圖像？

乾杯

2009-11-11 Elliott

您的意思是：'[] [] [] [] [] [] [img]'？它也可以換行到下一行？ – 2009-11-11 00:16:51

它的驗證..如顯示一個綠色的勾號或紅色的十字，如果它通過與否，所以使用JavaScript我希望它顯示在文本框旁邊，而不是必須找到位置 – Elliott 2009-11-11 00:21:04

因此，它是一個圖像的6盒，而不是一個圖像的權利？ – 2009-11-11 00:22:35

使用jQuery容易

$(".textbox").after('<img src="validation-mark.jpg" />');

這裏的HTML：

<input type="text" class="textbox"></input>

UPDATE

如果你想顯示/隱藏驗證標記，也許你可以讓它們都在HTML中聲明你的文本框這樣

<input type="text" id="textbox1"></input><img src="validation-mark.jpg" /> 
<input type="text" id="textbox2"></input><img src="validation-mark.jpg" /> 
<input type="text" id="textbox3"></input><img src="validation-mark.jpg" />

，並顯示他們或與此jQuery代碼隱藏起來：

$("#textbox1+img").hide(); 
$("#textbox1+img").show();

jQuery選擇#textbox1+img的意思是「ID的元素後的圖像：TextBox1的」

來源

2009-11-11 00:15:30

謝謝，比我想象的更容易！我將如何在JavaScript中隱藏/顯示圖像？ – Elliott 2009-11-11 00:35:26

我把這只是爲了回答這個問題，但我建議使用divs，Blaenk建議很好解決你的瀏覽器兼容性問題 – 2009-11-11 00:44:53

謝謝...你能給我一個例子如何在javascript中使用hide功能嗎？我沒有使用過jquery .. – Elliott 2009-11-11 00:49:53

div在各瀏覽器上的位置有何不同？如果你指的是填充等，你可以嘗試使用reset stylesheet。

來源

2009-11-11 00:17:10

例如圖片顯示內嵌在Firefox中的文本框中，但在IE中它顯示大約3行以下。 – Elliott 2009-11-11 00:22:21

是的，我很確定重置樣式表將解決瀏覽器之間的一些間距不一致問題。 – 2009-11-11 00:31:38

風格：

label.tbimg { 
    display: inline-block; 
    background-image: url(http://sstatic.net/so/img/vote-accepted-on.png); center right no-repeat; 
    padding-right: 30px; /*icon width*/ 
} 
label.noimg { 
    display: inline-block; 
    padding-right: 30px; /*icon width*/ 
}

的HTML：

<label class="tbimg"><input type="text" class="textbox"></input></label> 
<label class="noimg"><input type="text" class="textbox"></input></label> 
<label class="tbimg"><input type="text" class="textbox"></input></label> 
<label class="tbimg"><input type="text" class="textbox"></input></label> 
<label class="noimg"><input type="text" class="textbox"></input></label> 
<label class="tbimg"><input type="text" class="textbox"></input></label>

來源

2009-11-11 00:30:51

爲什麼不把它放在一個TD裏面（我想這是最簡單的）

例如

<table> 
<tr> 
<td><INPUT TYPE="TEXT" id="t1"></td> 
<td><INPUT TYPE="TEXT" id="t2"></td> 
<td><INPUT TYPE="TEXT" id="t3"></td> 
<td><INPUT TYPE="TEXT" id="t4"></td> 
<td><INPUT TYPE="TEXT" id="t5"></td> 
<td><INPUT TYPE="TEXT" id="t6"></td> 
<td><img src="myimg.jpg" /></td> 
</tr> 
</table>

如果需要（如果需求是這樣的話），請在運行時創建它。

來源

2009-11-11 06:52:21

在文本框後顯示圖像？

回答

相關問題