关于input框的问题解决方法

关于input的问题解决方法

1.在input中监听键盘事件

在用户登录或者搜索框的时候，一般都会监听键盘事件绑定回车按键，来执行登录/搜索等操作

原生绑定的方法：

<input onkeydown="keydownMsg(event)" type="text" />
 function keydownMsg(key) {
        keyCode = key.keyCode; //获取按键代码
        if (keyCode == 13) {  //判断按下的是否为回车键
            // 在input上监听到回车 do something
        }
    }

vue中的帮定办法：

Vue为监听键盘事件，提供了按键修饰符，并且为常用的按键提供了别名，使用方法如下:当回车按键在input中被按下的时候，会触发里面的函数。

 <input @keyup.enter="enterActive">

2.输入框首尾清除空格-trim()

输入框清除首尾空格是input较为常见的需求，通常在上传的时候将首尾空格去除掉。一般使用:字符串的原生方法trim() 从一个字符串的两端删除空白字符。

trim() 方法并不影响原字符串本身，它返回的是一个新的字符串。

原生的办法：

    var str2 = document.getElementById("inputId").trim();

vue去掉空格的办法：

Vue提供了修饰符删除首尾空格，加了修饰符.trim会自动过滤用户输入的首尾空白字符

 <input v-model.trim="msg">

3.textarea多行回车换行，显示的时候换行设置：

在使用textarea 标签输入多行文本的时候，如果没有对多行文本显示处理，会导致没有换行的情况,就比如下面这种情况，用户在textarea是有换行的。

利用css3的属性：
只要在显示内容的地方将该属性设置为white-space: pre-line或者white-space:pre-wrap，多行文本就可以换行了。

4.控制input显/隐密码

通过控制type的属性来实现：

//点击函数，获取dom，判断更改属性。
    show(){
        let input=document.getElementById("inputId");  
        if(input.type=="password"){ 
          input.type='text';
        }else{
          input.type='password';
        } 
    }

5.移动端底部input被弹出的键盘遮挡

input输入框是通过position:fixed一直放在页面底部，当点击input进行输入的时候，就会出现键盘顶起input的情况。

解决办法：
Element.scrollIntoView():方法让当前的元素滚动到浏览器窗口的可视区域内。

 document.querySelector('#inputId').scrollIntoView();

未完待续。。。。。。

关于input框的问题解决方法

关于input的问题解决方法

猜你喜欢