用按钮图像填充表单文本字段

Populate form text field with button image

本文关键字：文本 字段 表单 填充 按钮 图像      更新时间：2023-09-26

我看到这个问题/答案在点击单选按钮时填充文本框

这基本上实现了我想要的，但我想用我自己的图像作为按钮，而不是单选按钮，所以你点击图像"标签"，它就会变灰/几乎透明，并填充表单字段。

这是一个搜索表单，所以人们可以点击一个写着"餐馆"的按钮，然后它会在表单字段中填写餐馆，如果他们愿意，他们仍然可以在主搜索字段中键入，但这只是为了给用户更多的指导。

如果有什么方法可以在没有javascript的情况下做到这一点，那就太棒了，但我可能看不到会发生这种情况。

希望它相对简单。

提前感谢

单击Fiddle！

享受：）

Html:

 <fieldset data-role="controlgroup" data-type="horizontal">
    <div>
    <img class="stam" alt="Resturant" src="img1.jpg"/>
    <img class="stam" alt="Gym" src="img2.jpg"/>        
    </div>
</fieldset>       
<br>
<form>
    <input type="text">
</form>

Js:

$('.stam').on('click', function() {
    $('input[type="text"]').val($(this).attr("alt"));
});

演示

几次改变，你就可以出发了！

HTML

<fieldset data-role="controlgroup" data-type="horizontal">
  <div id="img_filter">
    <img data-filter="Restaurant" src="http://placehold.it/120x30/&text=Restaurant"/>
    <img data-filter="Park" src="http://placehold.it/120x30/&text=Park"/>
    <img data-filter="Bank" src="http://placehold.it/120x30/&text=Bank"/>
  </div>
</fieldset>       
<form>
  <input id="query" type="text" />
</form>

JS

$('#img_filter img').on('click', function() {   
 $('#query').val($(this).data('filter'));
});
相关文章：