自定义键盘信息

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

        window.onload=function(){
            var vm=new Vue({
                el:‘#box‘,
                data:{
                    a:‘blue‘
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keydown.c="show">
    </div>

</body>
</html>

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //ctrl->17
        /*document.onkeydown=function(ev){
            console.log(ev.keyCode);
        };*/
        window.onload=function(){
            var vm=new Vue({
                el:‘#box‘,
                data:{
                    a:‘blue‘
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keydown.17="show">
    </div>

</body>
</html>

3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //ctrl->17
        /*document.onkeydown=function(ev){
            console.log(ev.keyCode);
        };*/
        Vue.directive(‘on‘).keyCodes.ctrl=17;  //

        window.onload=function(){
            var vm=new Vue({
                el:‘#box‘,
                data:{
                    a:‘blue‘
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keydown.ctrl="show">
    </div>

</body>
</html>

4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //ctrl->17
        /*document.onkeydown=function(ev){
            console.log(ev.keyCode);
        };*/
        Vue.directive(‘on‘).keyCodes.ctrl=17;  //
        Vue.directive(‘on‘).keyCodes.myenter=13;

        window.onload=function(){
            var vm=new Vue({
                el:‘#box‘,
                data:{
                    a:‘blue‘
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keydown.myenter="show">
    </div>

</body>
</html>

5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //ctrl->17
        /*document.onkeydown=function(ev){
            console.log(ev.keyCode);
        };*/
        Vue.directive(‘on‘).keyCodes.ctrl=17;  //
        Vue.directive(‘on‘).keyCodes.myenter=13;

        window.onload=function(){
            var vm=new Vue({
                el:‘#box‘,
                data:{
                    a:‘blue‘
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keydown.myenter="show | debounce 2000">
    </div>

</body>
</html>
时间: 2024-10-17 08:25:59

自定义键盘信息的相关文章

vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; @keydown.a/b/c.... <input type="text" @keydown.c="show"> 自定义键盘信息: Vue.directi

vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 2.实例用法 2.1-1浅度监听:当点击页面,弹出发生变化了,a的值变为1,b的值变为101 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue视频: 自定义指令 &amp;&amp; 拖拽 &amp;&amp; 自定义键盘信息

v-textv-forv-html 指令: 扩展html语法 自定义指令:1. 自定义属性指令: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 // vm.$el }); <div v-red="参数"></div> 指令名称: v-red -> red * 注意: 必须以 v-开头(定义时去掉v-) <!DOCTYPE html> <html lang="en&q

android自定义键盘(解决弹出提示的字体颜色问题)

最近准备要做一个项目,需要用到自定义小键盘来确保安全,而且还需要精确获得用户点击键盘时的落点位置.力度.指尖接触屏幕的面积等参数. 在写自定义键盘的时候,用到了国内网上的一些代码,出处是 http://blog.csdn.net/hfsu0419/article/details/7924673 向先人致敬! 然后发现down下来的代码用到我的项目时,出现了各种问题: 1.首先,是一打开应用,就会出现弹出的是系统的输入法键盘,而是不自定义键盘,这个问题是由于EditText会在应用打开的使用获得焦

iOS IM开发建议(三)添加一个自定义键盘

各类的主流IM,都有自己定义的键盘:有表情键盘,选图片的键盘.其实都是一个inputView. 首先,我们要确定,我们的键盘是输入框调用的.也就是,我们可以设置的是某一个textView的inputView. // 让键盘进入编辑状态,替换输入源为自定义的fv // fv 是一个自定义的UIView - (void)callFaceKeyBoard:(UIButton *)button { [ktextView becomeFirstResponder]; ktextView.inputView

android 自定义键盘 KeyboardView的key 文字颜色发虚模糊

开发中自定义键盘是否遇到文字发虚吗??如下图: 解决办法: 1. 在key的xml中设置key文字不用keyLabel ,而用keyIcon,即用图片来代替文本,但是这种方法比较笨 2.最简单的是在keyboardview中设置两个属性即可: android:shadowColor="@color/c_white" android:shadowRadius="0.0" shadowColor 设置跟你按键的背景色一致即可!!! 这样按键的文字就会显示的很清晰了啊!!

iOS自定义键盘和系统键盘切换且文本输入框一直获得焦点

UITextView用来进行文本输入.方法becomeFirstResponder和resignFirstResponder可以用来进行弹出系统键盘和收下系统键盘. 弹出系统键盘,文本输入框获得焦点.收下系统键盘,文本输入框失去焦点.那么,问题来了. 某个条件下,如点击界面上的某个按钮,展示自定义键盘.再次点击,切换到系统键盘.先收下系统键盘,再展示自定义键盘.比如移动自定义键盘View的Frame.Y.但这时因为收下系统键盘,本文输入框失去焦点.虽然展示了自定义键盘.但用户体验很不好.光标没有

android 自定义键盘,代码实现自定义属性(自定义键盘背景,各个键的背景等)

由于工作需要,所以接触了自定义键盘.但是发现自己写的键盘太过丑陋了一些.废话不多说,先上图     第一张是修改后的.第二张是修改钱的.这基本上就是 OK.接下来就是重点了. android的keyboardview的属性中是有keybackground 的,但是在使用的时候,却发现没有生效.仔细看了下源码才发现.下面的这句话,把属性集合给设置成了空.所以就键盘的属性就一直无法生效. KeyboardView mKeyboardView = new KeyboardView(this, null

Snail—UI学习之自定义键盘及键盘收起(待完善)

在viewController.h中加入代理 #import <UIKit/UIKit.h> @interface WJJRootViewController : UIViewController <span style="color:#FF0000;"><UITextFieldDelegate></span> @end viewController.m中代码展示 #import "WJJRootViewController.h