js获取html文本框值,判断,跳转

//html:
<input type="text"  id="user"/>
<button onClick="beat()">login</button>

//js
function beat(){
    //一:原生js获取文本框的值:
    var content=document.getElementById("user");//input的id
    //二:jQuery获取文本框的值
    $("user").val();

    window.alert(content.value);
    //这个时候比较要用“==”
    if(content.value=="admin"){
        do...

        //跳转页面
        //方法1
        window.location.href="new.html";
        //方法2
        window.navigate("new.html");
        //方法3,返回上一页面
        window.history.back(-1);
        //方法4
        self.location='new.html';
        //方法5
        top.location='new.html';
}else{}

}
很抱歉,我是一个语言模型,无法为您提供实时交互式的代码演示。但是,我可以给您提供一个大体的思路: 1. 创建页面布局,包括6个文本框和数字键盘。 2. 给数字键盘上的数字和清空按钮添加点击事件,分别对应输入数字和清空所有文本框内容操作。 3. 给删除按钮添加点击事件,删除前一个文本框内容。 4. 给6个文本框添加输入事件,当输入框达到6个数字时,判断密码是否正确。 5. 如果密码正确,跳转至百度页面;如果密码错误,刷新当前页面。 下面是一个简单的代码实现,供您参考: HTML部分: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>输入密码跳转页面</title> </head> <body> <h2>请输入密码</h2> <form id="password-form"> <input type="text" id="input1" maxlength="1" readonly> <input type="text" id="input2" maxlength="1" readonly> <input type="text" id="input3" maxlength="1" readonly> <input type="text" id="input4" maxlength="1" readonly> <input type="text" id="input5" maxlength="1" readonly> <input type="text" id="input6" maxlength="1" readonly> </form> <div id="keypad"> <button onclick="inputNumber(1)">1</button> <button onclick="inputNumber(2)">2</button> <button onclick="inputNumber(3)">3</button> <br> <button onclick="inputNumber(4)">4</button> <button onclick="inputNumber(5)">5</button> <button onclick="inputNumber(6)">6</button> <br> <button onclick="inputNumber(7)">7</button> <button onclick="inputNumber(8)">8</button> <button onclick="inputNumber(9)">9</button> <br> <button onclick="clearAll()">C</button> <button onclick="inputNumber(0)">0</button> <button onclick="deleteInput()">X</button> </div> </body> </html> ``` JavaScript部分: ```javascript // 获取所有数字文本框 var inputs = document.querySelectorAll('input[type="text"]'); // 获取密码输入表单 var passwordForm = document.getElementById('password-form'); // 当前输入框的索引 var currentIndex = 0; // 密码 var password = '123456'; // 输入数字 function inputNumber(number) { if (currentIndex < inputs.length) { inputs[currentIndex].value = number; currentIndex++; } checkPassword(); } // 清空所有文本框 function clearAll() { inputs.forEach(function(input) { input.value = ''; }); currentIndex = 0; } // 删除前一个文本框 function deleteInput() { if (currentIndex > 0) { currentIndex--; inputs[currentIndex].value = ''; } } // 检查密码 function checkPassword() { if (currentIndex === inputs.length) { var currentPassword = ''; inputs.forEach(function(input) { currentPassword += input.value; }); if (currentPassword === password) { window.location.href = 'https://www.baidu.com'; } else { passwordForm.reset(); currentIndex = 0; alert('密码错误,请重新输入!'); } } } // 给所有文本框添加输入事件 inputs.forEach(function(input) { input.addEventListener('input', function() { if (input.value.length === 1) { currentIndex++; if (currentIndex < inputs.length) { inputs[currentIndex].focus(); } checkPassword(); } }); }); // 页面加载完成后第一个文本框获取焦点 window.onload = function() { inputs[0].focus(); } ``` 当然,这只是一个简单的实现,实际中需要加入更多的验证和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值