按顺序写input框

最新推荐文章于 2020-12-31 20:44:14 发布
最新推荐文章于 2020-12-31 20:44:14 发布
阅读量2.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42603150/article/details/84099634
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>shawl.qiu template</title>
    <script type="text/javascript">
        //<![CDATA[


    </script>
</head>
<body>
名称<input type="text" name="cbx" id="ipt_1" onchange="fn()">
IP<input type="text" name="cbx" id="ipt_2" onchange="fn1()">
端口<input type="text" name="cbx" id="ipt_3" onchange="fn2()">
所属城市<input type="text" name="cbx" id="ipt_4" onchange="fn3()">
所属机房<input type="text" name="cbx" id="ipt_5">

</body>
</html>

<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
<script>
    var ipt_1 = $('#ipt_1');
    var ipt_2 = $('#ipt_2');
    var ipt_3 = $('#ipt_3');
    var ipt_4 = $('#ipt_4');
    var ipt_5 = $('#ipt_5');


    if (ipt_1.val() == '') {
        ipt_2.attr('readonly', 'readonly');
        ipt_3.attr('readonly', 'readonly');
        ipt_4.attr('readonly', 'readonly');
        ipt_5.attr('readonly', 'readonly');
    }

    // 第一个判断

    function fn() {
        if (ipt_1.val() !== '') {
            ipt_2.removeAttr('readonly');
            ipt_3.removeAttr('readonly');
            ipt_4.removeAttr('readonly');
            ipt_5.removeAttr('readonly');
        }
        if (ipt_2.val() == '') {
            ipt_3.attr('readonly', 'readonly');
            ipt_4.attr('readonly', 'readonly');
            ipt_5.attr('readonly', 'readonly');
        }
    }


    // 判断第二
    function fn1() {
        if (ipt_2.val() !== '') {
            ipt_3.removeAttr('readonly');
            ipt_4.removeAttr('readonly');
            ipt_5.removeAttr('readonly');
        }
        if (ipt_3.val() == '') {
            ipt_4.attr('readonly', 'readonly');
            ipt_5.attr('readonly', 'readonly');
        }
    }

    // 判断第三个
    function fn2() {
        if (ipt_4.val() !== '') {
            ipt_5.attr('readonly', 'readonly');
        }
        if (ipt_4.val() == '') {
            ipt_4.removeAttr('readonly');

        }

    }

    // 判断第四个

    function fn3() {
        if (ipt_4.val() !== '') {
            ipt_5.removeAttr('readonly');
        }

    }

</script>
郭豪杨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
InputSequence:插入序号
05-10
输入顺序 它是一个插件，可让您使用文本编辑器“ Sublime Text”轻松输入序列号。 添加了在Sublime Text中输入序列字母数字字符的功能。 使用Sublime的多号插入符号功能，在显示在多个位置的插入符号上执行ctrl+shift+0命令，如果您以底部显示的形式指定输入格式，则数字将按从前开始的顺序输入插入位置，我会的。 基本用法 安装 它尚未添加到Package Control中，因此在安装前请输入github存储库路径。 从程序包控制中运行“添加存储库”。存储库路径输入区域将出现在窗口底部，因此请输入以下内容。 然后运行“安装软件包”以安装InputSequence。 卸载 运行从“程序包控制”中的“删除程序包”以卸载InputSequence。然后从菜单中打开Preferences > Package Settings > Package Control > Set
input输入的执行顺序【document，onkeydown】
qq_22841387的博客
03-10 834
问题描述 最近被问到一个问题，为什么输入框通过document获取不到值，明明我输入了值？ 大致情况就是他想通过onkeydown调用函数，函数内获取当前输入框的值，当输入的值等于回车时调用其他方法，但是他发现拿不到值，于是来问我 一开始，我没有一下子想到结论，然后通过debug找到了问题，并且进行对原理的深挖 大概还原一下问题的过程 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
input 变量名命名规则
weixin_33912246的博客
01-07 892
input 永远等待，直到用户输入一个值 n = input('输入用户名：')永远等待，直到用户输入一个值，就会将输入值 赋值给n n可以称为“变量” 代指某一个变化的值 变量名 命名规则： 只能由（数字、字母、下划线）来组成，且不能由数字来开头 部分关键词已经被python占用所以也不能用 不要和python内置的东西重复，初学者用pycharm编程时，软件...
jquery 动态添加、按顺序添加input文本框并且实现删除操作
dfBeautifulLive的博客
06-20 9269
1.先来一张图来告诉我们今天要实现什么 蓝色加号按钮点击就会动态添加一行“发明人N姓名”和“发明人N排名” 的input文本框还有图片”“  点击蓝色按钮减号就会减少相对应的那一行还有索引也会减掉图片”“ 2.首先 “发明人1姓名” 和 ”发明人1排名“是html要有的，然后点击加号按钮才会动态添加 贴出html 代码 发明人1姓名
input 输入框的事件触发及其顺序
weixin_30677073的博客
04-15 1089
<input id="field" type="text" /> <input type="text" onkeyup="if(!/^\d+$/.test(this.value)) { this.value='';}" /> <script> function g(type,selector){ if(type=="...
基于Element-UI的el-table，input框输入实现排序功能
weixin_30433075的博客
08-23 1227
最终效果如下 实现要求： 如果输入的内容不是非负整数，那么提示报错，并且将值变为输入前的内容； 如果输入正确，则当输入的内容发生改变并且失去焦点以后，触发事件，重新获取列表； 实现思路 使用原生的input框，更容易控制； 当输入框获取焦点以后，保存原始值； 监听回车点击事件与change事件，判断输入的值是否满足条件： 如果满足条件，那么就根据输入的内容更新内容，并且重新获取列表内容；...
Vue-input框checkbox强制刷新问题
10-17
在处理Vue的input框，特别是checkbox时，有时会遇到数据已经更新，但视图并未正确反映这些更新的情况。这通常涉及到Vue的响应式系统的运作机制。在描述的场景中，当用户点击checkbox后，数据模型（value）可能已经...
nextjs自己写ui中input框效果
04-12
例如，我们可以为Input框、边框、内阴影等设置样式。 5. **无障碍性**： - 为了确保良好的用户体验，我们还需要关注无障碍性（a11y）。这包括添加`aria-label`属性来描述输入框的目的，以及`tabIndex`属性来控制...
java中js代码删除input框
01-20
函数首先通过循环找到包含input的TR（表格行）元素，然后移除这个TR节点，从而实现input框的删除。这里假设input框是在一个表格中，因此需要找到其父TR节点来删除整个行。 接下来，代码涉及到复选框（checkbox）的...
tagsinput.js 实现记录checkbox勾选顺序
01-12
这可能包括重新排列复选框的视觉顺序，或者在文本框中显示按顺序排列的标签。 4. **数据绑定**：为了将这些值传递给后台，tagsinput.js 可能会使用`FormData`对象或其他形式的数据结构来收集选定的值。这些值会按照...
文本框输入后立即触发事件
热门推荐
meizhiyun的专栏
11-27 13万+
文本框输入事件：onchange 、onkeyup 、onblur onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 为了达到在文本框中输入内容后，立即触发事件，可以用onkeyup事件， 在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化
前端项目框架搭建随笔---input组件的编写
weixin_34221112的博客
08-24 357
接上篇文章，费心劳神好几天的项目框架终于可以用了。现在可以开始写页面了吧？既然上司说，UI框架我们自己来写，那我们就自己写吧。虽然答应的时候挺痛快。真到写的时候，首先就不知道从哪里开始下手了那我们就一点点来。先从组件框架开始一点点做。首先先排布一下UI框架目录。在于上司聊了许久后，最后决定用这种目录架构：红色箭头代表业务组件(business components) 存放项目中业务类组件的地方。如...
关于 input搜索 排序的组件
海阔天空
12-31 201
<template> <div class="product"> <div class="search_list"> <el-input class="inp" v-model="place" placeholder="请输入目的地"></el-input> <el-input class="inp" v-model="keyword" place
JQuery对HTML中input操作，注意先后顺序
dongvsning的专栏
09-13 1306
function copy(id, tag) { var new_one = $("#" + id).clone(true); var reCat = /(q_[0-9a-z]*)/gi; // 匹配动态组里的问题 var data = $(new_one).html(); data = parent.disposalMessyCode(data); var arrdata = dat
.input赋值之后input框无法输入，或者和其他input框错位，校验延迟
最新发布
08-13
综上所述，解决.input赋值后导致输入框无法输入、错位或校验延迟的问题，可以通过设置input框的可编辑属性、调整样式设置以及调整逻辑顺序来解决。 ### 回答3： 在编程中，使用.input赋值会导致input框无法输入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值