input框里如何插入一个文本框?

2021-07-31 09:32发布

[图]我想用input实现这样的一个效果,后面的【获取验证码】想插一个a链接,请教各位怎么写?

我想用input实现这样的一个效果,后面的【获取验证码】想插一个a链接,请教各位怎么写?bg03.png

7条回答
  • HTML

123
  • 倒计时JS

//验证码var counts = 60;function settime(val) {
    if(counts == 0) {
        val.removeAttribute("disabled");
        val.value = "获取验证码";
        counts = 60;
        return false;
    } else {
        val.setAttribute("disabled", true);
        val.value = "重新发送(" + counts + ")";
        counts--;
    }
    setTimeout(function() {
        settime(val);
    }, 1000);}123456789101112131415161718
  • Ajax接口JS

$(function(){
   //获取验证码
    $("#verCodeBtn").click(function() {
        var userinfo = {
            "UserPhoneNum": '86//' + $("input[name='phone']").val()
        }

        $.ajax({
            url: "https://www.xxxxx.cn/user/sendcode/",
            data: userinfo,
            type: "get",
            success: function(data) {
                if(JSON.parse(data).state === 404 || JSON.parse(data).state === 202 || userinfo.UserPhoneNum === '86//') {
                    alert("验证码发送失败")
                } else {
                    alert("验证码发送成功,请耐心等待")
                }
            },
            error: function() {
                alert("发送失败");
            }
        });
    });})


三岁奶猫
3楼 · 2021-08-02 10:03

文本框 :

按钮:

[removed]

function addNumber(everyone)

{

document.getElementById("text1").value += everyone;

}

[removed]


九不久
4楼 · 2021-08-03 14:07

   

    js发送短信验证码

   

[removed]

    var bt01 = document.getElementById("bt01");

    bt01.onclick = function() {

        bt01.disabled = true;   //当点击后倒计时时候不能点击此按钮

        var time = 5;   //倒计时5秒

        var timer = setInterval(fun1, 1000);    //设置定时器

        function fun1() {

            time--;

            if(time>=0) {

                bt01[removed] = time + "s后重新发送";

            }else{

                bt01[removed] = "重新发送验证码";

                bt01.disabled = false;    //倒计时结束能够重新点击发送的按钮

                clearTimeout(timer);    //清除定时器

                time = 5;   //设置循环重新开始条件

            }

        }

    }

[removed]


style

.wrap{

width: 270px;

border: 1px solid #ccc;

display: flex;

padding: 10px;

}

.wrap .btn{

padding: 5px 10px;

text-align: center;

background: #666;

color: #fff;

}

.wrap input{

flex:1;

}

class="wrap">

type="text">

class="btn">验证码


靓猴一枚
6楼 · 2021-08-04 09:47

比较完整的写法:

  

 


注:1.若直接在本页跳转到新的页面,则用:

  2.如果需要打开一个新的页面进行跳转,则用:


嘿呦嘿呦拔萝卜
7楼 · 2021-08-12 13:56

HTML添加文本框方法:,里面可以输入信息,还可以限制输入的字符数,宽度等。

按钮:

[removed]

function addNumber(everyone)

{

document.getElementById("text1").value += everyone;

}

[removed]


html页面中添加文本框,用到的工具,notepad++,步骤如下:

html代码部分:

 姓名:

网页效果图如下:

注意事项:input要配合form表单用。