input文本框里面插入小图片

input文本框里面插入小图片

[code]<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<style type=”text/css”>
body { font-family: Arial, Helvetica, Sans-serif; font-size:13px;}
#sampleForm label { display:block; margin-top:10px;}
#sampleForm input[type=”text”] { width:200px; border:solid 1px #000; padding:3px 0px;}
#sampleForm img { vertical-align:middle; cursor:pointer; }
.imageInputWrapper{ width:200px; border:solid 1px #000; }
#sampleForm input.inputWithImge { width:175px; border:none; margin-right:5px;}
</style>
<script type=”text/javascript” src=”JS库路径”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“.inputWithImge”).each(function(){
$(this).add($(this).next()).wrapAll(‘<div class=”imageInputWrapper”></div>’);
});
});
</script>[/code]

[code]<fieldset id=”sampleForm”>
<label for=”txtName”>Full name</label>
<input id=”txtName” type=”text” />
<label for =”txtDOB”>Date of birth</label>
<input id=”txtDOB” type=”text” class=”inputWithImge” />
<img src=”图片路径” alt=”Click to popup the clendar!” onclick=”alert(‘Popup some calendar here!’);” />
<label for=”txtBank”>Bank</label>
<input id=”txtBank” type=”text” class=”inputWithImge” />
<img src=”图片路径” alt=”Click to popup the bank window!” onclick=”alert(‘Popup some window here!’);” />
</fieldset>
<button id=”btnNothingToDo”>Do nothing</button>[/code]

还有一种是纯CSS编写的方法：《input搜索文本框中添加插入小图片》