動態更改按鍵屬性

我正在進行搜索，並且正在使用搜索圖標切換輸入字段。默認情況下，圖標被包裝在一個帶有類型按鈕的按鈕元素中，因此它不會提交表單。動態更改按鍵屬性

我想驗證是否輸入了文本，然後更改按鈕的類型，然後在下一次單擊圖標時提交。

這裏是我到目前爲止的代碼

// Mobile Search UI 
$(document).ready(function() { 
    $('.mobile-btn-search').click(function(){ 
    $('.mobile-input').toggle('slow'); 
    }); 

    $('.mobile-input').keyup(function(){ 
    if ($(this).val()) { 
     $('.mobile-btn-search').attr('type', 'submit'); 
    } 
    }); 
});

來源

2017-07-28 Payton Burdette

錯字：'$（'mobile-btn-search'）'大概應該是'$（'。mobile-btn-search'）' –

謝謝，即使在改變之後，我的屬性在值進入輸入字段。 –

'$（'mobile-input'）' - >'$（'。mobile-input'）'。雖然我會遵循@ ZakariaAcharki關於啓用/禁用按鈕的建議，而不是動態地改變其'type'，因爲後者可能會在某些瀏覽器中導致問題。 –

Working fiddle。

你可能得到以下錯誤：

Uncaught Error: type property can't be changed

檢查控制檯請。

您應該使用.prop()代替：

$('.mobile-btn-search').prop('type')

希望這有助於。

來源

2017-07-28 16:03:14

這不起作用，因爲我必須使用.mobile-btn-search來回切換輸入字段。如果該按鈕被禁用，那麼我將無法切換輸入字段。 –

你真的有兩個動作使用一個按鈕嗎？如果有人試圖用空字段進行搜索，那麼該字段將被搜索按鈕切換？ –

如果未輸入任何值，則字段將被搜索按鈕切換。在移動設備上的這種情況下，一個用於切換和搜索的按鈕可用於佈局。我知道我可以通過在輸入字段中隱藏另一個提交按鈕直到它被切換來完成它。但是我試圖編寫邏輯來讓它通過一個按鈕來實現。 –

動態更改按鍵屬性

回答

相關問題