基於鏈路選擇

-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

基於鏈路選擇

回答

相關問題