分享创作 讲讲 input 输入框

2238138900 · 2020年04月13日 · 最后由 2238138900 回复于 2020年07月18日 · 1281 次阅读
本帖已被设为精华帖!

前言

就是这个东西<input>,这个东西怎么读呢 它读"因普特" ,记住了哦😉

之所以讲input输入框,是因为蝶梦大佬们给的prompt提示输入框有bug,相信大家都发现了,而且最大的问题,把链接在qq里用直接不弹窗!所以我要讲讲└(^o^)┘!
输入框还是比较好懂的,就是输入完成后有很多人不会获取框内输入的内容,所以我这个大佬今天讲一讲,希望能帮新人更好的制作游戏!

基础

最简单的就是上面那个input,对没错,直接一个标签,在HTML中input没有结束标签,但在XHTML中input就必须要正确的关闭了(专业术语,提高本帖逼格的,不用管😂😂😂,蝶梦用的是HTML) 我们再讲些基础,比如,规定input输入框最多输入几个字符
这里就要用到maxlength,例子:

<input maxlength="10">


//这里就规定了这个输入框只能输入10个字符,在游戏开头让玩家输入自己角色名时适用,例如有些玩家喜欢把名字弄多长一大串(闲的没事干)……我们把maxlength改成2或3,他们就只能输入正常名了😂😂😂

type,可以定义input的类型,常用的就text和password,一个是正常输入(我的理解),password是输入掩码(输入后框中的内容都变成"·"),一般格式:

<input type="text/password/……">

然后就是size,这大家应该看size就知道了,控制输入框尺寸,一般格式如下

<input size="数值">

最后就是框内可以有默认内容,在标签内加placeholder,实例如下:

<input placeholder="请输入xxx">

这里就会有默认内容 基础演示☞从这里进链接

获取内容

上面这些都是简单基础,现在要讲高级一点的了,敲黑板了!
现在我们讲输入完后获取输入框中的内容
在获取前,你需要了解这些
直接点击加粗字体进入详细解说
※HTML规定元素的唯一id
※js函数
※正则表达式
正则表达式现在不会也没关系,毕竟我也只学了些皮毛😂
在获取时我们就要先在input里加上id,例如:

<input id="a">

这样,这个input的id就被定义为a了
之后,我们还要定义一个函数

=function 获取(){MD.a=document.getElementById("a").value}

这里的JavaScript代码相信有点基础都看得明白,这个函数就是获取刚刚id为"a"的输入框中的内容,然后存入变量a中,之后,我们在输入之后调用这个名为"获取"的函数
调用代码:

<:获取()

作者我很用心的将这个做了演示,链接在此
☞从这里进获取输入框内容演示
也许你不知道怎样把上面的三行代码联系起来,没关系!作者我把上面获取内容演示代码给你展示出来,如下:

=function 获取(){MD.a=document.getElementById("a").value}
<center>(1)输入内容,然后点击提交,我会获取你输入的内容(/1)
<center><input id="a" size="10" maxlength="10">
<center>(b)1(/b)
选:提交
[提交]
<:获取()
你输入的是:(j)MD.a(/j)

作者我用心吧?哈哈


美化边框

好了获取内容你已经会了,我们讲点拓展,仔细看哦!
利用css改变input外观 在input中加入圆角边框style="border-radius:15px",实例如下:

<input style="border-radius:15px">

演示在此☞从这里进圆角边框演示

配合正则表达式判断

利用正则表达式判断只允许输入中文

代码如下:
用正则表达就是在input里面加上onkeyup,这个比较偏,有兴趣可以去百度查查☞从这里进百度

<input type="text" placeholder="请输入姓名" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">

☞从这里进正则表达演示


共收到 7 条回复

萝卜快更新!!!

adminer 将本帖设为了精华贴 04月13日 22:48

大佬快更新些其他知识,支持!!

大佬厉害了

赞赞赞!!!!!!

赞赞(≧▽≦)/

我有一个问题,就是每次做完选项后再在选项的下面写文本,保存后再预览却只能显示第一个选项是什么问题?

加我QQ:2529855535问吧,论坛交流起来不方便,你问题问的不是很清晰

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册