兼容 required 和 readonly 同时使用

当前有一个需求,即保证输入框只读且不能为空,正常理解是一个错误需求,既然不能输入,怎么还不能为空呢?
实际原因是这个输入框不需要用户主动输入,而是用户点击按钮由系统生成内容填充到输入框,所以才有了这个需求。

那要怎么实现 equired 和 readonly 同时使用呢?我们了解到原生 html 的逻辑不能让 required 和 readonly 同时使用,但经过多种测试,为了达到我们特殊的需求,可以使用 jQuery 来绕道解決原生逻辑错误但实际确有需求的问题。

jQuery 运行库

<script src="//libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

Input 代码

<input type="text" class="myInput" autocomplete="off" required />

定义一个类 myInput,然后关闭 autocomplete="off" 自动填充功能,否则之前的记录还可以被激活选择填充到输入框;

jQuery 代码

<script>
    $(".myInput").on('keydown paste focus mousedown', function(e){
        if(e.keyCode != 9) // ignore tab
            e.preventDefault();
    });
</script>

使用 jQuery 识别输入框类,使输入框不被输入内容。

0 条评论

昵称

沙发空缺中,还不快抢~