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表单用。


相关问题推荐

  • 回答 11

    前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。简单地说,能够从 App 屏幕和浏览器上看到的东西都属于前端。前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基...

  • 回答 18

    一般在4.5个月左右。

  • 回答 9

    如果是指边框的大小,可以使用CSS样式控制,如:1content123#txtCon{width:100px; height:20px;}你也专可以属使用文本框自己的属性,定义文本框的行和列控制大小,如:1content

  • 前端适合女生学吗?2020-06-02 17:42
    回答 14

    很适合女生学习,主要是看自己在这方面有没有兴趣

  • 回答 15

    女生零基础学web前端是不难的。这是比较注重实际动手操作的学科,只要你肯用心学,并且有专业老师的指导,女生零基础学web前端,只需要4个月左右的时间

  • 回答 17

    html、css、js、框架、小程序等

  • 回答 11

    前端,UI,软测,室内,网络营销,新媒体运营我觉得都还是不错的

  • 回答 6

    1. 使用浮动float:left/rightdiv{ width:100px; height:100px; background:pink; float:left; } <div>1</div> <div>2</div>div{ width:100px; height:100px; background:pink; float:right; } &...

  • 回答 5

    HTML中有个class为box的div元素,通过修改css样式让box元素在页面水平垂直居中显示  

  • 回答 11

    HTML,CSSJavaScriptjQueryvue,React微信小程序,公众号

  • 回答 7

    对于前端初学者来说,html+css是入门前端最基础的内容,要学好并熟练运用html+css可从以下几点出发: 1.结合html+css+Photoshop,学会如何切割页面。所谓切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面。 2.打开有关浏览器网页,参...

  • 回答 7

    html如何让文字居中显示通过设置左右margin值为auto来实现居中的。我们来看个例子就是专设置属div这个块状元素水平居中:html代码:div{border:1pxsolidred;/*为了显示居中效果明显为div设置了边框*/width:200px;margin:20pxauto;/*margin-left与margin-right...

  • 回答 3

    有关块与内联元素的心得(内联元素右对齐)未改代码:目的:将日期右对齐,但下面的代码,把含日期内联元素转为块元素,再让其向右浮动,但结果显得为错位显示.未能达到预期目的. New Document #css01{width:360px;height:300px;text-align : left; float:left;margin...

没有解决我的问题,去提问