网站首页 » 前端开发 » div+css » input 输入框在项目开发中的各种需求实现
上一篇:
下一篇:

input 输入框在项目开发中的各种需求实现

前言

在前端开发中,当我们遇到 input 输入框的时候,需求总是会提出各种要求,让你做出来的东西更可靠,更人性化。所以在这里我们有必要把 input 输入框的一些常用的实现整理出来。

input 之旅

在这里我们尽可能的把所有涉及到的需要的实现方法都为大家整理出来,如果你觉得有些还没列出,那么可以留言,我会作进一步的完善。

首先把基础的 HTML 代码贴出来:

DEMO HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input 输入框在实践开发中的各种需求实现 - 云库前端</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>

    </style>
</head>
<body>
<input id="input-area" type="text">
<button id="btn">按钮</button>
</body>
</html>

下面的例子如果没有特殊说明,都是以上面的 HTML 代码为基础的。

限制输入字数

这个就很简单了,input 标签自带的属性(maxlength),直接看下面的 html 代码就可以了。

简单得不像话
<input maxlength="30" id="word-input" type="text">

获取输入字符的长度

JavaScript 代码
var inputArea = document.getElementById("input-area");
var btn = document.getElementById("btn");
btn.onclick = function(){
  var strLen = inputArea.value.length;
  console.log(strLen);
}

输入内容,然后点击按钮控制台就会打印出输入框中的字符长度了。

去空格字符
var inputArea = document.getElementById("input-area");
var btn = document.getElementById("btn");
btn.onclick = function(){
  var pat = /\s+/g; // 去掉空格
  var temp = inputArea.value.replace(pat,"");
  inputArea.value = temp;
}

用到正则,但非常地简单,输入带有空格的内容,点按钮后就会自动把输入框中的空格字符纺纺去掉。这里也可以使用 trim() 方法,但是这个就去只能去掉字符串的开始和结尾的空格,不能去掉字符串中间的空格。

监听 input

很多时候,我们需要监听 input 输入框来实现一些功能达到更好的用户体验。这里也有一个方法,就是给 input 输入框添加监听事件:

看这里
addEventListener("input",function(){
  var len = inputArea.value.length;
  console.log(len);
});

上面只是监听 input 框实时打印出输入字符串的长度,你可以通过这种监听的方式实现很多其它的需求。比如:上面说到的去掉空格字符,用这种方法就不用输入完内容后点击一下按钮触发了,而是实时的触发,只有你有空格我就马上给你去掉,并把处理后的字符串赋值给 input 框的 value 属性。例子:

JavaScript 代码
var inputArea = document.getElementById("input-area");
addEventListener("input",function(){
   var pat = /\s+/g; // 去掉空格
   var temp = inputArea.value.replace(pat,"");
   inputArea.value = temp;
});

从中面的这个例子中,我们还可以扩展更多的其它需求,比如:禁止输入特定的字符,或者只能输入特定的字符……,这样我们都可以对上面的这个例子中的正则匹配规则稍作修改就可以了。正则是个好东西,有兴趣的可以看这里《JavaScript 正则表达式用法及常用的正则表达式整理》。

另外,这里还有一点我们需要注意的,如果我们把 input 的宽度设置为零,那么这时候就会带来一个问题,就是输入框的光标总是在字符串的最前面,这肯定是有问题的,严重影响到删除操作,因为你不管你按的是电脑键盘的“Back Space” 键还是手机的删除键,你都没法删除文字。如果我们只是想借 input 来获取用户输入的内容,而文字显示的地方是其它的元素比如一个div。此时你又不想看到输入框,你肯定会想到把它隐藏起来,但又不能用“display:none”。为了让代码的副作用尽可能小,我们大可不必把 input 的宽度设置为0 ,你可以设置为 1px ,但这还是会看到一点点。此时你可以通过绝对定位,然后设置一个left:-10000000000px,这样就可以眼不见,心不烦了,设置了绝对定位,甚至你无需设置input 的宽,因为此时 input 输入框已经逃离了地球。你也可以通过设置透明度来达到隐藏的效果。但这时候 Input 有可能会挡住一些元素,如果 input 设置了绝对定位后。你可以使用这个属性来替换透明度,实现隐藏效果,visibility: hidden;这个与opacty 差不多,但它不会影响到你操作其它元素。

附送:《移动端 input 输入框弹出键盘时页面被吊打的解决方案

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/input-element-operation-collection/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END