我有这个HTML:

<input type="text" name="textField" />
<input type="submit" value="send" />

我怎样才能做这样的事情:

  • 文本字段为空时,应禁用提交(disabled="disabled").
  • 在文本字段中键入内容以删除禁用的属性时.
  • 如果文本字段再次变为空(文本被删除),则应再次禁用提交按钮.

我试过这样的方法:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

……但它不起作用.有什么想法吗?

推荐答案

问题是,Change事件只有在焦点从输入移开时才会触发(例如,有人单击输入或使用Tab键离开输入).请try 改用KeyUp:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

Javascript相关问答推荐

以Angular 删除 beforeunload 事件

如何在 javascript 中制作响应式 WASD 控制器

使用按钮单击保存项目变量

AWS-Amplify,我如何在 Angular 登录后重定向到另一个 URL?

在 Vue 中显示基于props 的条件文本的其他方式?

如何将主 js 文件中的数组用于不同的 js 文件?

我如何在这个动画 blob 中移动与“blob”的“交互”?

为什么我的 Select 的 MenuProps 中的 PaperProps 中的样式不适用于选择

通过 Javascript 中的键数组过滤对象

切换暗模式 - 新创建元素的问题

Typescript 自动生成的 JS 文件:“Uncaught TypeError: Failed to resolve module specifier”

画布 putimagedata 有时不会像预期的那样绘制

如何在下一个 js 中使用组件级 sass 文件

为什么这个二维数组过滤不起作用?

使用 useState 挂钩更新对象数组

Form.IO - 如何使 DataGrid 中的下拉选择变得可见

如何在 JavaScript 中对称拆分字符串?

为什么在以下情况下需要 IIFE?

createAsyncThunk 中的参数和参数应该如何设置?

遵循 github 上的安装文档后,Flickity-fade 滑块不起作用; flickity 就像普通滑块一样运行