基于链路选择

-1

充液文本字段中有一个空的文本字段的形式。以上是4个html按钮。当选择前三项中的任何一项时，它应该预先填充该值并将注意力集中在该字段上。例如，如果我点击10美元，它应该填充空白字段的值为10美元，并将焦点带到该字段。如果我再点击100美元，它会以100美元代替现场值，并将焦点带到现场。基于链路选择

最后，如果选择其他，它应该把重点放在字段上，但是如果它有一个值，则将字段留空或使其为空。

发现了jQuery的一些选项，但试图找到只有JavaScript干净的选项。否则，如有必要可以添加jQuery。

我有课，IDS和这样的完全控制。假设该选项将涉及onclick。在SO上找到了一些选项，但它们似乎比必要的复杂一点。

<a href="" class="" id="" />$1</a> 
<a href="" class="" id="" />$10</a> 
<a href="" class="" id="" />$100</a> 
<a href="" class="" id="" />Other</a> 

<form action="" method="post"> 
    <input type="text" name="" value=""> 
    <input type="submit" name="submit"> 
</form>

来源

2017-08-02 cchiera

您的文本字段也被隐藏起来，所以你不能把焦点给它 –

@ GabyakaG.Petrioli我的坏，我已经相应更新的示例代码。 – cchiera

这里有一个普通的JavaScript方式：

var linx = document.querySelectorAll("a") 
 
for (i = 0; i < linx.length; i++) { 
 
    linx[i].addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 
    document.querySelector('[type="text"]').value = (this.innerHTML != 'Other') ? this.innerHTML : ''; 
 
    document.querySelector('[type="text"]').focus() 
 
    }); 
 
}

<a href="" class="" id="">$1</a> 
 
<a href="" class="" id="">$10</a> 
 
<a href="" class="" id="">$100</a> 
 
<a href="" class="" id="">Other</a> 
 

 
<form action="" method="post"> 
 
    <input type="text" name="" value=""> 
 
    <input type="submit" name="submit"> 
 
</form>

来源

2017-08-02 19:36:19 j08691

哇，这是完美的。已经发送了几个小时，并以一种非常不同的更复杂的方式进行讨论。谢谢！ – cchiera

我张贴一个jQuery的解决方案（为简单起见），虽然变化将是微不足道的无的jQuery（但需要更多的击键）

$('.predefined').on('click', function(e){ 
 
    e.preventDefault(); 
 
    var value = $(this).data('value'); 
 
    
 
    $('.predefined-target').val(value).focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<a href="#" class="predefined" data-value="1"/>$1</a> 
 
<a href="#" class="predefined" data-value="10" />$10</a> 
 
<a href="#" class="predefined" data-value="100" />$100</a> 
 
<a href="#" class="predefined" data-value="" />Other</a> 
 

 
<form action="" method="post"> 
 
    <input type="text" class="predefined-target" name="whatever" value=""> 
 
    <input type="submit"> 
 
</form>

来源

2017-08-02 19:36:10

基于链路选择

回答

相关问题