`

快速查看IOS, Android, Windows等上不同浏览器对文本框的事件支持和keycode查询

 
阅读更多

快速查看Key Code小程序

<html>
  <head>
    <script>
      function displayKeyCode(evt)
      {
        var textBox = getObject('txtChar');
        var charCode = (evt.which) ? evt.which : event.keyCode
        textBox.value = String.fromCharCode(charCode);
        if (charCode == 8) textBox.value = "backspace"; //  backspace
        if (charCode == 9) textBox.value = "tab"; //  tab
        if (charCode == 13) textBox.value = "enter"; //  enter
        if (charCode == 16) textBox.value = "shift"; //  shift
        if (charCode == 17) textBox.value = "ctrl"; //  ctrl
        if (charCode == 18) textBox.value = "alt"; //  alt
        if (charCode == 19) textBox.value = "pause/break"; //  pause/break
        if (charCode == 20) textBox.value = "caps lock"; //  caps lock
        if (charCode == 27) textBox.value = "escape"; //  escape
        if (charCode == 33) textBox.value = "page up"; // page up, to avoid displaying alternate character and confusing people	         
        if (charCode == 34) textBox.value = "page down"; // page down
        if (charCode == 35) textBox.value = "end"; // end
        if (charCode == 36) textBox.value = "home"; // home
        if (charCode == 37) textBox.value = "left arrow"; // left arrow
        if (charCode == 38) textBox.value = "up arrow"; // up arrow
        if (charCode == 39) textBox.value = "right arrow"; // right arrow
        if (charCode == 40) textBox.value = "down arrow"; // down arrow
        if (charCode == 45) textBox.value = "insert"; // insert
        if (charCode == 46) textBox.value = "delete"; // delete
        if (charCode == 91) textBox.value = "left window"; // left window
        if (charCode == 92) textBox.value = "right window"; // right window
        if (charCode == 93) textBox.value = "select key"; // select key
        if (charCode == 96) textBox.value = "numpad 0"; // numpad 0
        if (charCode == 97) textBox.value = "numpad 1"; // numpad 1
        if (charCode == 98) textBox.value = "numpad 2"; // numpad 2
        if (charCode == 99) textBox.value = "numpad 3"; // numpad 3
        if (charCode == 100) textBox.value = "numpad 4"; // numpad 4
        if (charCode == 101) textBox.value = "numpad 5"; // numpad 5
        if (charCode == 102) textBox.value = "numpad 6"; // numpad 6
        if (charCode == 103) textBox.value = "numpad 7"; // numpad 7
        if (charCode == 104) textBox.value = "numpad 8"; // numpad 8
        if (charCode == 105) textBox.value = "numpad 9"; // numpad 9
        if (charCode == 106) textBox.value = "multiply"; // multiply
        if (charCode == 107) textBox.value = "add"; // add
        if (charCode == 109) textBox.value = "subtract"; // subtract
        if (charCode == 110) textBox.value = "decimal point"; // decimal point
        if (charCode == 111) textBox.value = "divide"; // divide
        if (charCode == 112) textBox.value = "F1"; // F1
        if (charCode == 113) textBox.value = "F2"; // F2
        if (charCode == 114) textBox.value = "F3"; // F3
        if (charCode == 115) textBox.value = "F4"; // F4
        if (charCode == 116) textBox.value = "F5"; // F5
        if (charCode == 117) textBox.value = "F6"; // F6
        if (charCode == 118) textBox.value = "F7"; // F7
        if (charCode == 119) textBox.value = "F8"; // F8
        if (charCode == 120) textBox.value = "F9"; // F9
        if (charCode == 121) textBox.value = "F10"; // F10
        if (charCode == 122) textBox.value = "F11"; // F11
        if (charCode == 123) textBox.value = "F12"; // F12
        if (charCode == 144) textBox.value = "num lock"; // num lock
        if (charCode == 145) textBox.value = "scroll lock"; // scroll lock
        if (charCode == 186) textBox.value = ";"; // semi-colon
        if (charCode == 187) textBox.value = "="; // equal-sign
        if (charCode == 188) textBox.value = ","; // comma
        if (charCode == 189) textBox.value = "-"; // dash
        if (charCode == 190) textBox.value = "."; // period
        if (charCode == 191) textBox.value = "/"; // forward slash
        if (charCode == 192) textBox.value = "`"; // grave accent
        if (charCode == 219) textBox.value = "["; // open bracket
        if (charCode == 220) textBox.value = "\\"; // back slash
        if (charCode == 221) textBox.value = "]"; // close bracket
        if (charCode == 222) textBox.value = "'"; // single quote
        var lblCharCode = getObject('spnCode');
        lblCharCode.innerHTML = 'KeyCode:  ' + charCode;
        return false;
      }
      function getObject(obj)
      {
        var theObj;
        if (document.all) {
          if (typeof obj=='string') {
            return document.all(obj);
          } else {
            return obj.style;
          }
        }
        if (document.getElementById) {
          if (typeof obj=='string') {
            return document.getElementById(obj);
          } else {
            return obj.style;
          }
        }
        return null;
      }
    </script>
  </head>
  <body>
    <p>
      按键之后查看keyCode:<input onkeypress="javascript:return false;" id="txtChar" onkeydown="javascript:return displayKeyCode(event)" type="text" name="txtChar">
      &nbsp;&nbsp;&nbsp;<span id="spnCode" name="spnCode"></span>
    </p>
  </body>
</html>

 

 

快速查看文本框支持的事件和KeyCode:

<!DOCTYPE html>
<html ng-app="test">

  <head>
    <script src="angular.js"></script>
    <script>
      angular.module("test", [])
      .run(function() {
        var lastEvent;
        var $test = angular.element(document.getElementById('test')),
            $list = angular.element(document.getElementById('list'));
        //$test.on('keydown compositionstart compositionend compositionupdate keyup keypress input change focus blur touch textInput', function(event) {
        $test.on('keydown', function(event) {
          //if (lastEvent !== event.type) {
            lastEvent = event.type;
            eventFeedback(event.type + '-' + event.keyCode);
          //}
        });
        function eventFeedback(text) {
          var $children = $list.children();
          //if ($children.length === 8) {
          //  $children.eq(0).remove();
          //}
          $list.append('<li>' + text + '</li>');
        }
      });
    </script>
  </head>

  <body>
    <h1>Hello There!</h1>
    <input id="test" type="text" ng-model="foo" />
    <pre>{{foo}}</pre>
    <ul id="list"></ul>
  </body>

</html>

 

 

分享到:
评论

相关推荐

    .net,js捕捉文本框回车键事件的小例子(兼容多浏览器).docx

    首先,我们需要理解不同浏览器对键盘事件的处理方式。在Internet Explorer(IE)中,键盘事件是通过`window.event`对象来访问的,而Netscape、Firefox、Chrome等现代浏览器则使用`event`参数来传递事件对象。因此,...

    asp.net 文本框回车事件

    对于现代浏览器(如Chrome、Firefox等),建议使用`addEventListener`来监听键盘事件,如下所示: ```javascript document.getElementById('txtTest').addEventListener('keydown', function (event) { if ...

    unity3d手机开发Android Keycode 最新对照表

    unity3d手机开发Android Keycode 最新对照表 本人测试可用!

    .net,js捕捉文本框回车键事件的小例子(兼容多浏览器)

    由于早期的IE浏览器和后来的W3C标准在事件处理上有所不同,因此需要对这两种方式都进行支持。代码中通过判断window.event的有无来区分IE和其他浏览器,通过不同的属性(keyCode和which)来获取按键码。这样,无论是...

    VB KeyAscii 和 KeyCode 查询器

    综上所述,`KeyAscii`和`KeyCode`是VB编程中处理键盘输入的关键工具,它们使得开发者能够对用户的键盘操作进行精细的控制和响应。了解并熟练运用这两个参数,可以大大提升你的VB应用程序的交互性和用户体验。通过...

    asp.net控制键盘keycode事件

    以上就是关于“asp.net控制键盘keycode事件”的详细解释,希望能帮助你理解和掌握如何在ASP.NET环境中使用键盘事件和`keycode`。在实际开发中,可以根据需求灵活运用这些技术,创建更加智能化和响应式的Web应用。

    Android 对应键盘KeyCode

    Android 对应键盘KeyCode,主要用于开发蓝牙键盘获取code值而存的

    键盘 keycode的值 javascript时触发事件

    - 在不同的操作系统和浏览器版本中,某些按键的`keyCode`可能有所不同。 - 对于一些特殊字符键,如`@`、`#`等,`keyCode`值可能会与字母键重合,此时建议使用`event.key`或`event.code`来获取更准确的键值。 - 当...

    延迟了TextChanged事件的TextBox文本框控件C#源代码

    在标题和描述中提到的"延迟了TextChanged事件的TextBox文本框控件"是指一种优化策略,它不会在每次用户输入时立即触发事件,而是等待用户停止输入一段时间后再处理事件。这种设计可以避免不必要的计算,提高用户体验...

    keyCode和charCode详解

    在JavaScript中,键盘事件处理是常见的交互方式,其中`keyCode`和`charCode`是两个重要的属性,它们分别表示不同的编码信息。这篇文章将深入解析这两个属性的区别和应用场景。 `keyCode`是一个代表物理按键的整数值...

    KeyCode和KeyAscii对照值

    通过对`KeyCode`与`KeyAscii`的详细分析可以看出,虽然它们都用于表示键盘按键的信息,但其应用场景和含义存在明显差异。开发者需要根据具体的使用需求选择合适的键值类型。在编写与键盘交互相关的程序时,熟悉这些...

    Android虚拟键码对照表

    此外,Android的虚拟键码对照表还包括一些非标准的键码,如媒体控制键(播放/暂停、上一曲、下一曲)、音量键(增大、减小)以及各种软键盘上的特殊键(如搜索键、菜单键、回退键等)。这些键码使得开发者可以处理...

    安卓模拟系统发送返回键值(KEYCODE_BACK)(csdn)————程序.pdf

    总结起来,这篇文章主要介绍了如何在Android应用中模拟发送返回键值(KEYCODE_BACK)的两种方法:使用`Instrumentation`和通过`Runtime.exec()`执行命令行操作。同时,也解释了相关权限`INJECT_EVENTS`的实际应用...

    验证文本框只能输入数字和小数点

    4. **兼容火狐和IE浏览器**:考虑到不同浏览器之间的差异,需要确保脚本能在主流浏览器上正常工作。 #### 三、技术实现 实现以上功能主要涉及JavaScript编程语言中的事件监听和字符串操作。 ##### 3.1 JavaScript...

    中文输入法以及浏览器兼容的问题1

    总的来说,处理中文输入法和浏览器兼容性问题需要对DOM事件和用户代理有深入理解。通过合理选择和使用事件监听器,以及对浏览器行为的精确控制,可以有效地解决这些问题,提供更好的用户体验。在开发过程中,应不断...

    文本框焦点转移C#程序

    在C#编程中,文本框焦点转移是一项基本的用户界面(UI)操作,它涉及到如何在多个文本框之间切换用户的输入焦点。这个“文本框焦点转移C#程序”可能是一个简单的Windows Forms或WPF应用程序,用于演示或实现这种功能...

    ANDROID_KEYCODE.docx

    在Android操作系统中,`KEYCODE` 是一个关键概念,它代表了手机硬件按键的各种编码,使得开发者可以通过软件模拟用户按下这些按键。这份文档,"ANDROID_KEYCODE.docx",提供了Android平台手机键值的详细列表,这对于...

    文本框中,回车键触发事件的js代码[多浏览器兼容]

    标题“文本框中,回车键触发事件的js代码[多浏览器兼容]”所指的知识点涉及JavaScript脚本编程,在网页中如何捕捉和处理回车键的按键事件,以及如何确保该事件处理在不同的浏览器(如IE和Firefox)中均能正确运行。...

Global site tag (gtag.js) - Google Analytics