动态更改按键属性

我正在进行搜索，并且正在使用搜索图标切换输入字段。默认情况下，图标被包装在一个带有类型按钮的按钮元素中，因此它不会提交表单。动态更改按键属性

我想验证是否输入了文本，然后更改按钮的类型，然后在下一次单击图标时提交。

这里是我到目前为止的代码

// 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来回切换输入字段。如果该按钮被禁用，那么我将无法切换输入字段。 –

你真的有两个动作使用一个按钮吗？如果有人试图用空字段进行搜索，那么该字段将被搜索按钮切换？ –

如果未输入任何值，则字段将被搜索按钮切换。在移动设备上的这种情况下，一个用于切换和搜索的按钮可用于布局。我知道我可以通过在输入字段中隐藏另一个提交按钮直到它被切换来完成它。但是我试图编写逻辑来让它通过一个按钮来实现。 –

动态更改按键属性

回答

相关问题