使用 materialize.css 和 jQuery 重置输入

Question

我想使用

清除输入字段

$('#test').val('');

字段本身已被清除，但 Materialize.css 中的突出显示仍然保持填充状态。

https://codepen.io/anon/pen/vrPNKd

使用...

$('#form')[0].reset();

... 我别无选择。我只想重置一个输入字段而不是整个表单。

有人有想法吗？

谢谢

// 编辑

找到解决方案：

$('#test').val('').removeClass('valid');
M.updateTextFields();

Answer 1

您需要从 <input> 旁边的标签元素中删除 class active:

$('#test').val('');
$('#test').next().removeClass('active');

next 方法用于 select <label> 元素，因为它是 <input> 元素的紧随其后的同级元素。

Answer 2

我找到了解决方案...它有点长但很有效！

在Blade视图中

<div class="input-field testValidator">
    <input name="test" id="test" type="text" data-length="8">
    <label for="test">test</label>
</div>

在jQuery

  $("input[name='test']").val('');
  $('.testValidator span').text('');

逻辑是将 input-field 的跨度措辞中的文本从“??/8”更改为“”

Answer 3

我检测到文本区域的样式会根据您在文本区域内键入的行数而增长。

在我的例子中，默认的内联样式如下.. style="height: 43px";

因此，为了将文本区域重置为原始高度，我使用 JQuery

执行了以下操作

$('#test').val('');
$('#test').css('height', '43px');

希望对您有所帮助！

Answer 4

如果您使用 correct element structure，那么当您填写具体化表格时会发生三件事：

1) 输入值

2)标签位置

3）输入样式（验证class）

这是一个未填写的输入：

<div class="input-field col s6">
     <input id="last_name" type="text" class="validate">
     <label for="last_name">Last Name</label>
</div>

并填写：

<div class="input-field col s6">
     <input id="last_name" type="text" class="validate valid">
     <label for="last_name" class="active">Last Name</label>
</div>

要回到原始状态，我们需要从输入中删除 .valid class（添加绿色边框底部），从标签中删除 .active class（移动它向上）然后输入文本：

jQuery('#last_name').removeClass('valid').val('');
jQuery('label[for=last_name]').removeClass('active')

使用 materialize.css 和 jQuery 重置输入

Reset input with materialize.css und jQuery

forms

jquery

materialize