2019-06-23 19:58:30 qq_42259469 阅读数 1274

学习Vue.js第三天

键盘事件keyup

<label>你所在城市:</label><input type="text" v-on:keyup="City"/>
<label>你所在公司:</label><input type="text" v-on:keyup="Company"/>
<!--City,Company方法提示-->
City: function(){
					alert("你正在输入你所在的城市!");
				},
				Company: function(){
					alert("你正在输入你所在的公司!");
				}

只要你用键盘输出就会触发事件如下图:
在这里插入图片描述
回车才触发keyup.enter

<label>你所在城市:</label><input type="text" v-on:keyup.enter="City"/>
<label>你所在公司:</label><input type="text" v-on:keyup.enter="Company"/>

输入完城市和公司需要按Enter回车才触发事件如下图
在这里插入图片描述
还有种按alt+Enter才触发的修饰符:keyup.alt.enter

<label>你所在城市:</label><input type="text" v-on:keyup.alt.enter="City"/>
<label>你所在公司:</label><input type="text" v-on:keyup.alt.enter="Company"/>

全部代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Vue.js</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			#view {
				width: 500px;
				padding: 100px 20px;
				border: solid 1px lightsalmon;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="dcf">
			<!--{{}}起来的方法需要在方法后面加(),用""起来的可以不用-->
			<h1>{{monster()}}</h1>
			<!--直接{{}}里面放data里的属性就可以显示值了-->
			<p>我叫{{name}},今年{{age}}岁。</p>
			<!--单击事件-->
			<button v-on:click.once="{{age++}}">单击大一岁</button>
			<!--双击事件-->
			<button v-on:dblclick="{{age++}}">双击大一岁</button></br>
			</br>
			<!--如果直接href="blog"是不行的,F12也看见我们的链接显示的是href="blog"而不是href="https://blog.csdn.net/qq_42259469"-->
			<a v-bind:href="blog" v-on:click.prevent="alert()">博客链接</a>
			<!--鼠标事件,显示鼠标的X,Y轴-->
			<div id="view" v-on:mousemove=" updateXY ">{{x}},{{y}} -- <span v-on:mousemove.stop>停止</span></div>
			<!--嵌入b标签加粗-->
			<p v-html="Record ">{{time}}</p>
			<label>你所在城市:</label><input type="text" v-on:keyup.enter="City" />
			<label>你所在公司:</label><input type="text" v-on:keyup.enter="Company" />
		</div>
	</body>
	<script>
		new Vue({
			el: '#dcf',
			data: {
				name: 'Old Monster',
				age: '22',
				blog: 'https://blog.csdn.net/qq_42259469',
				Record: '<b>记录于2019</b>',
				x: 0,
				y: 0
			},
			methods: { //可以放多个方法
				monster: function() {
					return 'hello,Vue.js!!!';
				},
				updateXY: function(event) {
					this.x = event.offsetX; //获取鼠标X轴
					this.y = event.offsetY; //获取鼠标Y轴
				},
				alert: function() {
					alert("即将跳转到Old Monster的博客主页!");
				},
				City: function() {
					alert("你输入完城市并回车了!");
				},
				Company: function() {
					alert("你输入完公司并回车了!");
				}
			}
		});
	</script>

</html>
2015-10-21 17:06:52 orichisonic 阅读数 7025

微信公众平台开发时,客户提需求“输入框中输入内容时,输入框后边显示清除按钮,清除输入框中的内容”,使用“keyup”事件时在中文输入法下部分按键keyup事件无效, 以下为解决方案。

绑定“input”和“propertychange”事件可以解决,以下为代码:

    var bind_name="input";//定义所要绑定的事件名称
    if(navigator.userAgent.indexOf("MSIE")!=-1) bind_name="propertychange";//判断是否为IE内核 IE内核的事件名称要改为propertychange
    /*输入框键盘离开事件绑定*/
    $("input").bind(bind_name,function(){
        if(this.value!=null&&this.value!=""){
            var inputWidth=$(this).outerWidth();
            var inputHeight=$(this).outerHeight();
            var inputOffset =  $(this).offset();
            var inputTop=inputOffset.top;
            var inputLeft=inputOffset.left;
            $("#clearDiv").css({top:inputTop+2,left:inputLeft+inputWidth-27}).show();
            inputObj=this
        }else{
            $("#clearDiv").hide();
        }
    });

另外网上还有另一种解决方案,具体思路为给输入框注册focus事件,隔段时间去检索下,我个人还是比较倾向于上面那种方法的,以下为第二种方案代码:

<script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script>

    $(function () {
        $('#wd').bind('focus',filter_time);
    })

    var str = '';
    var now = ''
    filter_time = function(){
        var time = setInterval(filter_staff_from_exist, 100);
        $(this).bind('blur',function(){
            clearInterval(time);
        });
    };

    filter_staff_from_exist = function(){
        now = $.trim($('#wd').val());
        if (now != '' && now != str) {
            console.log(now);
        }
        str = now;
    }
    </script>

 我倾向于前一种方法,用focus和blur容易出错,我的代码是:

      var bind_name = 'input';
                if (navigator.userAgent.indexOf("MSIE") != -1) {
                    bind_name = 'propertychange';
                }
                if(navigator.userAgent.match(/android/i) == "android")
                {
                    bind_name = "keyup";




                }
               
           $("#search_content").bind(bind_name, function (event) {

                event.stopPropagation();
                if ($("#search_content").val() == "") {
                  
                    $("#UlContent li").remove();
                    $("#content").hide();
                    $("#SearchResult").hide();
                }
                else {

                    if (CheckChinese($("#search_content").val()) != "")
                        $("#content").show();


                }
                if (CheckChinese($("#search_content").val())) {
                    $.ajax({
                        type: "POST",
                        anync: true,
                        url: "HelpCenterSuggestion.ashx",
                        cache: false,
                        dataType: "text",
                        data: { m: $("#search_content").val() },
                        success: function (result) {
                            //alert(result);

                            $("#UlContent li").remove();
                            $("#UlContent li").removeAttr("padding");
                             $("#UlContent").append(result);
                                $("#SearchResult").show();
                   
                          

                        }

                    });
                }

            });


这里为了考虑苹果,android的情况还要触发不同事件,红米和小米的keyup没有问题,但是苹果的ios不按换行是不会搜索关键字,只能绑定propertychange,这个问题在javascript冒泡事件中多次被提及,但是关键这里还有一个样式问题,很有意思,当初有获得焦点设置一个大几号的字,但是由于考虑设计需求,去掉了这个样式,导致红米和小米android中无法显示获得焦点,即字可以输入但是输入框里内容出不来,最后还是增加了字号,只是获得焦点和不获得焦点都是一个字号。

<span style="color:#333333;">#search input[type="text"]{
  background: url(http://j5.dfcfw.com/image/201510/20151014122746.png) no-repeat 8px 5px #FFF;
  border: 0 none;
  /*border:-5px -5px -5px -5px;*/
  
  /*font: normal 14px "microsoft yahei",Arial,sans-serif;*/

  color: #CCCCCC;
  </span><span style="color:#ff0000;"> font-size:14px;</span><span style="color:#333333;">
  width:96%;
   margin:5px 5px 5px 5px;
  height:29px;
  padding: 10px 5px 10px 42px;
  border-radius: 8px 8px 8px 8px;
  box-sizing:border-box;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;*/
  /*transition: all 0.8s ease 0s;*/
}
/* 定义focus下的CSS,这里定义输入框宽度变化 */
#search input[type="text"]:focus{
  background: url(http://j5.dfcfw.com/image/201510/20151014122746.png) no-repeat 8px 5px #FFF;
  color:#6a6f75;
 
  vertical-align:middle;
  </span><strong><span style="color:#ff6666;">font-size:14px;</span></strong><span style="color:#333333;">
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;*/
  width:96%;
}</span>


里面红色的两个如果不设置,在红米和小米会不显示。

2019-07-01 15:08:08 qq_35366269 阅读数 1316

什么是 @keyup ?

          @keyup 是按键松开的事件,当指定的按键松开会触发的事件。常用的事件如下:

@keyup常用事件
事件代码 事件描述
@keyup.enter 回车按键松开
@keyup.left 左键松开
@keyup.right 右键松开
@keyup.up 上键松开
@keyup.down 下键松开
@keyup.delete 删除键松开

 

          @keyup 事件使用场景:

                    1、平台登录页面可以使用该事件,当输入账号和密码后,无需点击登录按钮,直接在输入密码以后回车完成登录,以增加用户体验 

@keyup 怎么使用?

           

     @keyup.enter(回车键松开) 事件监听如下:
<template>
    <div>
      <div>
        <input type="text" placeholder="请输入账号"/>
      </div>
      <div>
        <input type="password" placeholder="请输入密码" @keyup.enter="keyupTest"/>
      </div>
    </div>
</template>

<script>
    export default {
        name: "@keyup_60",
      data(){
          return {
            input:"",
          }
      },
      methods:{
        keyupTest(){
          console.log("正在登录中......")
        }
      }
    }
</script>

<style scoped>

</style>

 

效果如下: 

 

 @keyup 如何在Element-ui 组件中使用

         在实际开发过程中,我们会发现在Element-ui组件中使用@keyup.enter 无效,这是因为Element-ui组件是在原生组件的基础上进行封装了的,如果想在Element-ui组件中使用@keyup 事件,那么就必须加上 native 关键字,如下案例:

<template>
    <div>
      <!--
      在Element-ui 组件中的使用
       @keyup.native.enter  (回车键松开的使用案例)
      -->
      <div>
        <el-input
          placeholder="请输入账号"
          v-model="account"
          clearable
          style="width: 15%"
        >
        </el-input>
      </div>

      <div>
        <el-input
          type="password"
          placeholder="请输入密码"
          v-model="password"
          clearable
          style="width: 15%"
          @keyup.native.enter="keyupTest"
        >
        </el-input>
      </div>
    </div>
</template>

<script>
    export default {
        name: "@keyup_60",
      data(){
          return {
            password:"",
            account:"",
          }
      },
      methods:{
        keyupTest(){
          console.log("正在登录中......")
        }
      }
    }
</script>

<style scoped>

</style>

 

效果图:

 

 

 

 

更多技术请关注QQ群:636212586

2013-09-10 18:39:47 u010034351 阅读数 3699

实例1:在文本框内任意按下一个按键,改变文本框的颜色

<html>

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(){               //按下改变颜色
    $("input").css("background-color","#FFFFCC");
  });
  $("input").keyup(function(){                  //松开改变颜色
    $("input").css("background-color","#D6D6FF");
  });

});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</p>
<p><button id="btn1">触发输入域的 keydown 事件</button></p>
<p><button id="btn2">触发输入域的 keyup 事件</button></p>
</body>

</html>

实例2:在文本框按下enter键,触发事件。

function keyLogin(){
//按键事件。
$('#username').keyup(function(event){
if(event.keycode=='13'){        //当按下enter键时。
if($('#username').val()==""||$('#username').val()=="请输入用户名"){
mini.alert("请输入用户名!");
return;
}else if($('#username').val().toString().length<2 ||$('#username').val().toString().length>10){
mini.alert("输入不合法!");
return;
}else{
$('#password').focus();        //跳到输入密码文本框。
}

});
 
$('#password').keyup(function(event){
if(event.keycode==13){
if($('#password').val()==""||$('#password').val()=="请输入用户名"){
mini.alert("请输入用户名!");
return;
}else if($('#password').val().toString().length<2 ||$('#password').val().toString().length>10){
mini.alert("输入不合法!");
return;
}else{
submitData();      //去数据库中匹配。
}
}
});
 
 }


关于如何得到一个键在Javascript中的Keycode值,可以参考:

<body onkeypress=alert(event.keyCode)>请按任意键,你将得到该键的键值!

keycode 0 =
keycode 1 =
keycode 2 =
keycode 3 =
keycode 4 =
keycode 5 =
keycode 6 =
keycode 7 =
keycode 8 = BackSpace BackSpace
keycode 9 = Tab Tab
keycode 10 =
keycode 11 =
keycode 12 = Clear
keycode 13 = Enter
keycode 14 =
keycode 15 =
keycode 16 = Shift_L
keycode 17 = Control_L
keycode 18 = Alt_L
keycode 19 = Pause
keycode 20 = Caps_Lock
keycode 21 =
keycode 22 =
keycode 23 =
keycode 24 =
keycode 25 =
keycode 26 =
keycode 27 = Escape Escape
keycode 28 =
keycode 29 =
keycode 30 =
keycode 31 =
keycode 32 = space space
keycode 33 = Prior
keycode 34 = Next
keycode 35 = End
keycode 36 = Home
keycode 37 = Left
keycode 38 = Up
keycode 39 = Right
keycode 40 = Down
keycode 41 = Select
keycode 42 = Print
keycode 43 = Execute
keycode 44 =
keycode 45 = Insert
keycode 46 = Delete
keycode 47 = Help
keycode 48 = 0 equal braceright
keycode 49 = 1 exclam onesuperior
keycode 50 = 2 quotedbl twosuperior
keycode 51 = 3 section threesuperior
keycode 52 = 4 dollar
keycode 53 = 5 percent
keycode 54 = 6 ampersand
keycode 55 = 7 slash braceleft
keycode 56 = 8 parenleft bracketleft
keycode 57 = 9 parenright bracketright
keycode 58 =
keycode 59 =
keycode 60 =
keycode 61 =
keycode 62 =
keycode 63 =
keycode 64 =
keycode 65 = a A
keycode 66 = b B
keycode 67 = c C
keycode 68 = d D
keycode 69 = e E EuroSign
keycode 70 = f F
keycode 71 = g G
keycode 72 = h H
keycode 73 = i I
keycode 74 = j J
keycode 75 = k K
keycode 76 = l L
keycode 77 = m M mu
keycode 78 = n N
keycode 79 = o O
keycode 80 = p P
keycode 81 = q Q at
keycode 82 = r R
keycode 83 = s S
keycode 84 = t T
keycode 85 = u U
keycode 86 = v V
keycode 87 = w W
keycode 88 = x X
keycode 89 = y Y
keycode 90 = z Z
keycode 91 =
keycode 92 =
keycode 93 =
keycode 94 =
keycode 95 =
keycode 96 = KP_0 KP_0
keycode 97 = KP_1 KP_1
keycode 98 = KP_2 KP_2
keycode 99 = KP_3 KP_3
keycode 100 = KP_4 KP_4
keycode 101 = KP_5 KP_5
keycode 102 = KP_6 KP_6
keycode 103 = KP_7 KP_7
keycode 104 = KP_8 KP_8
keycode 105 = KP_9 KP_9
keycode 106 = KP_Multiply KP_Multiply
keycode 107 = KP_Add KP_Add
keycode 108 = KP_Separator KP_Separator
keycode 109 = KP_Subtract KP_Subtract
keycode 110 = KP_Decimal KP_Decimal
keycode 111 = KP_Divide KP_Divide
keycode 112 = F1
keycode 113 = F2
keycode 114 = F3
keycode 115 = F4
keycode 116 = F5
keycode 117 = F6
keycode 118 = F7
keycode 119 = F8
keycode 120 = F9
keycode 121 = F10
keycode 122 = F11
keycode 123 = F12
keycode 124 = F13
keycode 125 = F14
keycode 126 = F15
keycode 127 = F16
keycode 128 = F17
keycode 129 = F18
keycode 130 = F19
keycode 131 = F20
keycode 132 = F21
keycode 133 = F22
keycode 134 = F23
keycode 135 = F24
keycode 136 = Num_Lock
keycode 137 = Scroll_Lock
keycode 138 =
keycode 139 =
keycode 140 =
keycode 141 =
keycode 142 =
keycode 143 =
keycode 144 =
keycode 145 =
keycode 146 =
keycode 147 =
keycode 148 =
keycode 149 =
keycode 150 =
keycode 151 =
keycode 152 =
keycode 153 =
keycode 154 =
keycode 155 =
keycode 156 =
keycode 157 =
keycode 158 =
keycode 159 =
keycode 160 =
keycode 161 =
keycode 162 =
keycode 163 =
keycode 164 =
keycode 165 =
keycode 166 =
keycode 167 =
keycode 168 =
keycode 169 =
keycode 170 =
keycode 171 =
keycode 172 =
keycode 173 =
keycode 174 =
keycode 175 =
keycode 176 =
keycode 177 =
keycode 178 =
keycode 179 =
keycode 180 =
keycode 181 =
keycode 182 =
keycode 183 =
keycode 184 =
keycode 185 =
keycode 186 =
keycode 187 = acute grave
keycode 188 = comma semicolon
keycode 189 = minus underscore
keycode 190 = period colon
keycode 191 =
keycode 192 = numbersign apostrophe
keycode 193 =
keycode 194 =
keycode 195 =
keycode 196 =
keycode 197 =
keycode 198 =
keycode 199 =
keycode 200 =
keycode 201 =
keycode 202 =
keycode 203 =
keycode 204 =
keycode 205 =
keycode 206 =
keycode 207 =
keycode 208 =
keycode 209 =
keycode 210 = plusminus hyphen macron
keycode 211 =
keycode 212 = copyright registered
keycode 213 = guillemotleft guillemotright
keycode 214 = masculine ordfeminine
keycode 215 = ae AE
keycode 216 = cent yen
keycode 217 = questiondown exclamdown
keycode 218 = onequarter onehalf threequarters
keycode 219 =
keycode 220 = less greater bar
keycode 221 = plus asterisk asciitilde
keycode 222 =
keycode 223 =
keycode 224 =
keycode 225 =
keycode 226 =
keycode 227 = multiply division
keycode 228 = acircumflex Acircumflex
keycode 229 = ecircumflex Ecircumflex
keycode 230 = icircumflex Icircumflex
keycode 231 = ocircumflex Ocircumflex
keycode 232 = ucircumflex Ucircumflex
keycode 233 = ntilde Ntilde
keycode 234 = yacute Yacute
keycode 235 = oslash Ooblique
keycode 236 = aring Aring
keycode 237 = ccedilla Ccedilla
keycode 238 = thorn THORN
keycode 239 = eth ETH
keycode 240 = diaeresis cedilla currency
keycode 241 = agrave Agrave atilde Atilde
keycode 242 = egrave Egrave
keycode 243 = igrave Igrave
keycode 244 = ograve Ograve otilde Otilde
keycode 245 = ugrave Ugrave
keycode 246 = adiaeresis Adiaeresis
keycode 247 = ediaeresis Ediaeresis
keycode 248 = idiaeresis Idiaeresis
keycode 249 = odiaeresis Odiaeresis
keycode 250 = udiaeresis Udiaeresis
keycode 251 = ssharp question backslash
keycode 252 = asciicircum degree
keycode 253 = 3 sterling
keycode 254 = Mode_switch



获取键盘的KeyCode

<html>
<head>
<script language="javascript">
ns4 = (document.layers) ? true : false;
ie4 = (document.all) ? true : false;
function keyDown(e){
if(ns4){
var nkey=e.which;
var iekey='现在是ns浏览器';
var realkey=String.fromCharCode(e.which);
}
if(ie4){
var iekey=event.keyCode;
var nkey='现在是ie浏览器';
var realkey=String.fromCharCode(event.keyCode);
if(event.keyCode==32){realkey='\' 空格\''}
if(event.keyCode==13){realkey='\' 回车\''}
if(event.keyCode==27){realkey='\' Esc\''}
if(event.keyCode==16){realkey='\' Shift\''}
if(event.keyCode==17){realkey='\' Ctrl\''}
if(event.keyCode==18){realkey='\' Alt\''}
}
alert('ns浏览器中键值:'+nkey+'\n'+'ie浏览器中键值:'+iekey+'\n'+'实际键为'+realkey);
}
document.onkeydown = keyDown;
if(ns4){
document.captureEvents(Event.KEYDOWN);}
</script>
</head>
<body>
//Javascript Document.
<hr>
<center>
<h3>请按任意一个键。。。。</h3>
</center>
</body>
</html>


keyup() 方法

阅读数 297

没有更多推荐了,返回首页