分享创作 讲讲 input 输入框
前言
就是这个东西<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,'')">
☞从这里进正则表达演示