Html中的JS操作键盘事件判断

最新推荐文章于 2021-08-14 08:28:23 发布
最新推荐文章于 2021-08-14 08:28:23 发布
阅读量2k 收藏
点赞数 1
分类专栏： web


太值得收藏了！！

表单相关收集 

 

只能是写限定的东西

-----------------------------------------------------------------------------------

ENTER键可以让光标移到下一个输入框 

<input οnkeydοwn="if(event.keyCode==13)event.keyCode=9" > 

只能是中文<input οnkeyup="value=value.replace(/[ -~]/g,')" οnkeydοwn="if(event.keyCode==13)event.keyCode=9"> 

只能是英文和数字.屏蔽了输入法<input style="ime-mode:disabled" οnkeydοwn="if(event.keyCode==13)event.keyCode=9"> 

只能输入英文和数字<input οnkeyup="value=value.replace(/[\W]/g,') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,'))" οnkeydοwn="if(event.keyCode==13)event.keyCode=9"> 

只能是数字<input οnkeyup="value=value.replace(/[^\d]/g,') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,'))">

只能显示，不能修改的文本框<input readOnly value="只能显示，不能修改">

-----------------------------------------------------------------------------------

只能是数字,判断按键

-----------------------------------------------------------------------------------

<script  language=javascript>

function  onlyNum()

{

if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)||(event.keyCode==8)))

event.returnValue=false;

}

<input  οnkeydοwn="onlyNum();">  

-----------------------------------------------------------------------------------

附：获取键盘的KeyCode

-----------------------------------------------------------------------------------

<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);}

//Javascript Document.

<hr>

<center>

<h3>请按任意一个键。。。。</h3>

</center>

-----------------------------------------------------------------------------------

限制网页用键盘

-----------------------------------------------------------------------------------

<body οnkeydοwn="alert('禁用');return false;">

限制键盘的某个键：body οnkeydοwn="if(event.keyCode==num){alert('禁用');return false;}

-----------------------------------------------------------------------------------

再加个找按键的值

-----------------------------------------------------------------------------------

function show(){

  alert("ASCII代码是："+event.keyCode);

}

<body οnkeydοwn="show()">

-----------------------------------------------------------------------------------

只能是IP地址

-----------------------------------------------------------------------------------

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<style>

.a3{width:30;border:0;text-align:center}

</style>

function mask(obj){

obj.value=obj.value.replace(/[^\d]/g,')

key1=event.keyCode

if (key1==37 || key1==39)

{ obj.blur();

nextip=parseInt(obj.name.substr(2,1))

nextip=key1==37?nextip-1:nextip+1;

nextip=nextip>=5?1:nextip

nextip=nextip<=0?4:nextip

eval("ip"+nextip+".focus()"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

} 

if(obj.value.length>=3) 

if(parseInt(obj.value)>=256 || parseInt(obj.value)<=0)

{

alert(parseInt(obj.value)+"IP地址错误！"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

obj.value=""

obj.focus()

return false;

}

else 

{ obj.blur();

nextip=parseInt(obj.name.substr(2,1))+1

nextip=nextip>=5?1:nextip

nextip=nextip<=0?4:nextip

eval("ip"+nextip+".focus()"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

}

}

function mask_c(obj)

{

clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,'))

}

<title>IP地址输入</title>

IP地址输入

<div style="border-width:1;border-color:balck;border-style:solid;width:165;font-size:9pt">

<input type=text name=ip1 maxlength=3 class=a3 οnkeyup="mask(this)" onbeforepaste=mask_c()>.

<input type=text name=ip2 maxlength=3 class=a3 οnkeyup="mask(this)" onbeforepaste=mask_c()>.

<input type=text name=ip3 maxlength=3 class=a3 οnkeyup="mask(this)" onbeforepaste=mask_c()>.

<input type=text name=ip4 maxlength=3 class=a3 οnkeyup="mask(this)" onbeforepaste=mask_c()>

</div>

-----------------------------------------------------------------------------------

用#default#savehistory防止后退清空text文本框

-----------------------------------------------------------------------------------

<HTML>

<HEAD>

<META NAME="save" CONTENT="history">

<STYLE>

  .saveHistory {behavior:url(#default#savehistory);}

</STYLE>

</HEAD>

<BODY>

<INPUT class=saveHistory type=text id=oPersistInput>

<input type=button οnclick='"<a target='_blank' href='Html中的JS操作键盘事件判断 - 我爱老婆 - 我的博客http://www.cnbruce.com/images/logo.gif>

<input type=file name=file><input type=button οnclick=pic.src=file.value value=预览图片>

<input type=button οnclick=alert(file.value) value=图片地址>

<input type=button οnclick="file.outerHTML=file.outerHTML.replace(/value=\w/g,')" value="清除file里字">

-----------------------------------------------------------------------------------

去掉下拉选项的边框

-----------------------------------------------------------------------------------

<div style=";absolute; left: 10px; top: 10px; width: 115px; height: 20px;  clip:rect(2 114 20 2);"> 

   <select>

    <option >cnpeople</option>

    <option >cnrose</option>

   <option >cnbruce</option>  

  </select>

  </font>

</div>

-----------------------------------------------------------------------------------

下拉列表打开窗口

-----------------------------------------------------------------------------------

<select  onChange="if(this.selectedIndex && this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;">

<option selected>更多链接……</option>

<option value="<a target='_blank' href='Html中的JS操作键盘事件判断 - 我爱老婆 - 我的博客http://www.windsn.com">windsn.com</option>'>http://www.windsn.com">windsn.com</option></a>

<option value="<a target='_blank' href='Html中的JS操作键盘事件判断 - 我爱老婆 - 我的博客http://www.yaguo.com/~mswenlin">yaguo/~mswenlin</option>'>http://www.yaguo.com/~mswenlin">yaguo/~mswenlin</option></a>

<option value="<a target='_blank' href='Html中的JS操作键盘事件判断 - 我爱老婆 - 我的博客http://www.blueidea.com">blue!dea'>http://www.blueidea.com">blue!dea</a>

</select>

-----------------------------------------------------------------------------------

TAB的显示

-----------------------------------------------------------------------------------

function editTab()

{

    var code, sel, tmp, r

    var tabs=""

    event.returnValue = false

    sel =event.srcElement.document.selection.createRange()

    r = event.srcElement.createTextRange()

    switch (event.keyCode)

    {

        case (8)    :

            if (!(sel.getClientRects().length > 1))

            {

                event.returnValue = true

                return

            }

            code = sel.text

            tmp = sel.duplicate()

            tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)

            sel.setEndPoint("startToStart", tmp)

            sel.text = sel.text.replace(/^\t/gm, ""screen.width/2)this.width=screen.width/2" vspace=2 border=0>

            code = code.replace(/^\t/gm, ""screen.width/2)this.width=screen.width/2" vspace=2 border=0>.replace(/\r\n/g, "\r"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

            r.findText(code)

            r.select()

            break

        case (9)    :

            if (sel.getClientRects().length > 1)

            {

                code = sel.text

                tmp = sel.duplicate()

                tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)

                sel.setEndPoint("startToStart", tmp)

                sel.text = "\t"+sel.text.replace(/\r\n/g, "\r\t"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

                code = code.replace(/\r\n/g, "\r\t"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

                r.findText(code)

                r.select()

            }

            else

            {

                sel.text = "\t"

                sel.select()

            }

            break

        case (13)    :

            tmp = sel.duplicate()

            tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)

            tmp.setEndPoint("endToEnd", sel)

            for (var I=0; tmp.text.match(/^[\t]+/g) && I<tmp.text.match(/^[\t]+/g)[0].length; I++)    tabs += "\t"

            sel.text = "\r\n"+tabs

            sel.select()

            break

        default        :

            event.returnValue = true

            break

    }

}

<textarea  cols=75  rows=20  οnkeydοwn="editTab()">

alert("ok"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

</textarea>

-----------------------------------------------------------------------------------

文本框的上/下拉

-----------------------------------------------------------------------------------

<form name="cnbruce">

<textarea name="com">

</textarea>

</form>

<SPAN title='放大输入框' style='FONT-SIZE: 12px; CURSOR: hand'  οnclick=document.cnbruce.com.rows+=4>向下</SPAN>

 <SPAN title='缩小输入框' style='FONT-SIZE: 12px; CURSOR: hand' class='arrow' οnclick='if(document.cnbruce.com.rows&gt;=4)document.cnbruce.com.rows-=4;else return false'>向上</SPAN>

-----------------------------------------------------------------------------------

一个复选框，点击之后一组复选框全部都选上

-----------------------------------------------------------------------------------

<input type="checkbox" name="checkA" onpropertychange="for(I=0;I<A.children.length;I++){A.children[I].checked=this.checked}">a

<span id="A">

<input type="checkbox" name="A1">

<input type="checkbox" name="A2">

<input type="checkbox" name="A3">

</span>

-----------------------------------------------------------------------------------

Debug Textarea：在线写 js 脚本的时候，用来即时查错的东西！

-----------------------------------------------------------------------------------

<HTML>

<HEAD>

<TITLE>Debug Textarea</TITLE>

<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>

</HEAD>

<style>

* {

    font-size: 12px

}

body {

    margin: 10px; padding: 0px

}

table.list{

    cursor: default;

    border:1px solid #cccccc

    background-color: #cccccc;

    border-collapse: collapse;

    border-Color: #cccccc;

}

</style>

<script language="javascript">

// Coded by windy_sk <windy_sk@126.com> 20040205

function reportError(msg,url,line) {

    var str = "You have found an error as below: \n\n";

    str += "Err: " + msg + " on line: " + line;

    alert(str);

    return true;

}

window.onerror = reportError;

document.onkeydown = function() {

    if(event.ctrlKey){

        switch(event.keyCode) {

            case 82: //r

                runcode();

                break;

            case 83: //s

                savecode();

                break;

            case 71: //g

                goto(prompt('Please input the line number', '1'));

                break;

            case 65: //a

                document.execCommand("selectAll"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

                break;

            case 67: //c

                document.execCommand("Copy"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

                break;

            case 88: //x

                document.execCommand("Cut"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

                break;

            case 86: //v

                document.execCommand("Paste"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

                break;

            case 90: //z

                document.execCommand("Undo"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

                break;

            case 89: //y

                document.execCommand("Redo"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

                break;

            default:

                break;

        }

        event.keyCode = 0;

        event.returnValue = false;

    }

    return;

}

function show_ln(){

    var txt_ln     = document.getElementById('txt_ln');

    var txt_main     = document.getElementById('txt_main');

    txt_ln.scrollTop = txt_main.scrollTop;

    while(txt_ln.scrollTop != txt_main.scrollTop) {

        txt_ln.value += (I++) + '\n';

        txt_ln.scrollTop = txt_main.scrollTop;

    }

    return;

}

function editTab(){

    var code, sel, tmp, r

    var tabs='

    event.returnValue = false

    sel =event.srcElement.document.selection.createRange()

    r = event.srcElement.createTextRange()

    switch (event.keyCode){

        case (8)    :

            if (!(sel.getClientRects().length > 1)){

                event.returnValue = true

                return

            }

            code = sel.text

            tmp = sel.duplicate()

            tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)

            // 出错检验代码~~~~~~

            if(sel.parentElement() != tmp.parentElement()) return;

            sel.setEndPoint('startToStart', tmp)

            sel.text = sel.text.replace(/^\t/gm, ')

            code = code.replace(/^\t/gm, ').replace(/\r\n/g, '\r')

            r.findText(code)

            r.select()

            break

        case (9)    :

            if (sel.getClientRects().length > 1){

                code = sel.text

                tmp = sel.duplicate()

                tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)

                // 出错检验代码~~~~~~

                if(sel.parentElement() != tmp.parentElement()) return;

                sel.setEndPoint('startToStart', tmp)

                sel.text = '\t'+sel.text.replace(/\r\n/g, '\r\t')

                code = code.replace(/\r\n/g, '\r\t')

                r.findText(code)

                r.select()

            }else{

                sel.text = '\t'

                sel.select()

            }

            break

        case (13)    :

            tmp = sel.duplicate()

            tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)

            // 出错检验代码~~~~~~

            if(sel.parentElement() != tmp.parentElement()) return;

            tmp.setEndPoint('endToEnd', sel)

            for (var I=0; tmp.text.match(/^[\t]+/g) && I<tmp.text.match(/^[\t]+/g)[0].length; I++)    tabs += '\t'

            sel.text = '\r\n'+tabs

            sel.select()

            break

        default        :

            event.returnValue = true

            break;

    }

    return;

}

function runcode() {

    var str = document.getElementById("txt_main"screen.width/2)this.width=screen.width/2" vspace=2 border=0>.value;

    var code_win = window.open('about:blank');

    code_win.document.open();

    code_win.document.writeln(""screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

    code_win.document.writeln("function reportError(msg,url,line){\nline-=14;\nvar str='You have found an error as below: \\n\\n';\nstr+='Err: '+msg+' on line: '+(line);\nalert(str);\nopener.goto(line);\nopener.focus();\nwindow.οnerrοr=null;\nsetTimeout('self.close()',10);\nreturn true;\n}"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

    code_win.document.writeln("window.onerror = reportError;"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

    code_win.document.writeln("<\/script>"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

    code_win.document.writeln(str);

    code_win.document.close();

    return;

}

function savecode() {

    var str = document.getElementById("txt_main"screen.width/2)this.width=screen.width/2" vspace=2 border=0>.value;

    var code_win = window.open('about:blank','_blank','top=10000');

    code_win.document.open();

    code_win.document.writeln(str);

    code_win.document.close();

    code_win.document.execCommand('saveas',','code.html');

    code_win.close();

    return;

}

function goto(ln) {

    if(!/^\d+＄/.test(ln)) return;

    var obj = document.getElementById("txt_main"screen.width/2)this.width=screen.width/2" vspace=2 border=0>;

    var rng = obj.createTextRange();

    var arr = obj.value.replace(/\r/, ""screen.width/2)this.width=screen.width/2" vspace=2 border=0>.split(/\n/);

    if(ln>arr.length) ln = arr.length;

    var str_tmp = "";

    for(var I=0; I<ln-1; I++) {

        str_tmp += arr[I];

    }

    rng.moveStart('character',str_tmp.length+1);

    str_tmp = "";

    for(I=ln; I<arr.length; I++) {

        str_tmp += arr[I];

    }

    rng.moveEnd('character',-str_tmp.length); 

    rng.select();

    return;

}

window.onload = function() {document.getElementById("txt_main"screen.width/2)this.width=screen.width/2" vspace=2 border=0>.value = "\nalert(')\n<\/script>";}

<BODY>

<table width='600' class='list' border='1' bgcolor='#eeeeee' bordercolorlight='#000000' bordercolordark='#FFFFFF' cellpadding='0' cellspacing='0'>

  <tr bgcolor='#cccccc'> 

    <td colspan='2' height='20' align='center'><b>Debug Textarea</b></td>

  </tr>

  <tr> 

    <td colspan='2'>

        <table width='95%' border='0' align='center' >

      <tr> 

        <td align='center'>

          <textarea id='txt_ln' name='content' rows='10' style='width:40px;overflow:hidden;height:200px;border-right:0px;text-align:right;line-height:14px' onselectstart='this.nextSibling.focus();return false' readonly></textarea><textarea id='txt_main' name='content' rows='10' cols='80' οnkeydοwn='editTab()' οnkeyup='show_ln()' οnscrοll='show_ln()' wrap='off' style='overflow:auto;height:200px;padding-left:5px;border-left:0px;line-height:14px'></textarea>

          for(var I=1; I<=20; I++) document.getElementById('txt_ln').value += I + '\n';

        </td>

      </tr>

          <tr> 

            <td align='center'>

              <input type='button' value=' 运 行 ' οnclick='runcode()' accesskey='r'>  

              <input type='button' value=' 保 存 ' οnclick='savecode()' accesskey='s'>  

              <input type='button' value=' 跳 转 ' οnclick="goto(prompt('Please input the line number', '1'))"  accesskey='g'&gt;  

            </td>

          </tr>

        </table>

    </td>

  </tr>

</table>

</BODY>

</HTML>

-----------------------------------------------------------------------------------

TAB键在文本域中的体现

-----------------------------------------------------------------------------------

function editTab()

{

    var code, sel, tmp, r

    var tabs=""

    event.returnValue = false

    sel =event.srcElement.document.selection.createRange()

    r = event.srcElement.createTextRange()

    switch (event.keyCode)

    {

        case (8)    :

            if (!(sel.getClientRects().length > 1))

            {

                event.returnValue = true

                return

            }

            code = sel.text

            tmp = sel.duplicate()

            tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)

            sel.setEndPoint("startToStart", tmp)

            sel.text = sel.text.replace(/^\t/gm, ""screen.width/2)this.width=screen.width/2" vspace=2 border=0>

            code = code.replace(/^\t/gm, ""screen.width/2)this.width=screen.width/2" vspace=2 border=0>.replace(/\r\n/g, "\r"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

            r.findText(code)

            r.select()

            break

        case (9)    :

            if (sel.getClientRects().length > 1)

            {

                code = sel.text

                tmp = sel.duplicate()

                tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)

                sel.setEndPoint("startToStart", tmp)

                sel.text = "\t"+sel.text.replace(/\r\n/g, "\r\t"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

                code = code.replace(/\r\n/g, "\r\t"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

                r.findText(code)

                r.select()

            }

            else

            {

                sel.text = "\t"

                sel.select()

            }

            break

        case (13)    :

            tmp = sel.duplicate()

            tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)

            tmp.setEndPoint("endToEnd", sel)

            for (var I=0; tmp.text.match(/^[\t]+/g) && I<tmp.text.match(/^[\t]+/g)[0].length; I++)    tabs += "\t"

            sel.text = "\r\n"+tabs

            sel.select()

            break

        default        :

            event.returnValue = true

            break

    }

}

<textarea cols=75 rows=20 οnkeydοwn="editTab()">

alert("ok"screen.width/2)this.width=screen.width/2" vspace=2 border=0>

</textarea>

-----------------------------------------------------------------------------------

获取input的非value值，而是显示文本值

-----------------------------------------------------------------------------------

<select name="sss" onChange="alert(this.options[this.selectedIndex].text)">

<option value="1">asdf</option>

<option value="2">bbbb</option>

<option value="3">ccc</option>

</select>

wapw
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
制作一个页面，页面上放一个文本框、一个按钮。按钮上显示的文本为“判断”，并给按钮关联点击事件，在事件中判断文本框里的数是偶数还是奇数，弹出窗口显示判断结果。
qq_48965298的博客
01-02 5389
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="txt" placeholder="请输入一个数"> <br/> <input type="button" value="判断" id="save
js 监听监键盘动作
风过无声
01-19 6万+
转载自：http://geelong.javaeye.com/blog/810054
KeyPress 和KeyDown 、KeyUp之间的区别
AlecZhang1992的博客
08-21 288
KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符 KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所...
html 点击同意,一个id 绑定click事件 做不同的条件判断？
weixin_35932973的博客
06-23 411
js代码://弹窗注册协议ms=window.parent.document.getElementById('inputzz1');ks=window.parent.document.getElementById('inputzz');$('#yes-agree').click(function(){console.log(ms);if(!(ms.getAttribute('checked')))...
js判断键盘按键
ardo_pass的博客
12-16 9662
js判断键盘按键 判断方法: 表 3. DHTML 键盘事件 名称 说明 onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。 onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。 onkeydo
js中键盘事件实例简析
12-10
本文将深入解析JavaScript键盘事件及其应用，并针对给定的实例进行分析。 首先，我们要了解键盘事件的基本类型： 1. `keydown`：当用户按下键盘上的键时触发。 2. `keyup`：当用户释放键盘上的键时触发。 3. `...
javascript 判断用户有没有操作页面
11-27
javascript 判断用户有没有操作页面 用js判断用户有没有操作页面，我们所要做的就是整理我们的思路。 一、思路 用户有没有操作界面，我们可以从页面在规定时间内有没有触发事件去考虑。比如用户有没有点击，有没有...
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
12-03
在JavaScript编程中，有时我们需要监听用户的键盘输入，特别是当用户按下回车键时，可能希望执行特定的操作，比如触发某个按钮的点击事件。这在表单提交或搜索功能中非常常见。本文将详细介绍如何利用JavaScript实现...
JavaScript Dom 绑定事件操作实例详解
10-16
在JavaScript中，DOM绑定事件是实现用户交互的关键部分，允许我们响应用户的操作，如点击按钮、输入文本等。以下是对JavaScript DOM绑定事件的详细讲解，包括几种常见的绑定方式及其应用场景。 1. **直接在HTML中...
中文输入法不触发onkeyup事件的解决办法
09-04
`onkeyup`事件是一种常见的键盘事件，它在用户释放键盘按键时触发。然而，当用户使用中文输入法时，由于输入过程涉及候选词选择和确认，`onkeyup`事件可能不会像英文输入那样正常触发，导致我们的实时监控功能失效。...
[HTML] JS 键盘监听事件
wabil的专栏
07-31 5335
js键盘事件监听                var ie;      var firefox;      if (document.all) ie = true; else ie = false; //判断是否IE           document.onkeydown = KeyPress;     //设置键盘事件函数            function
在html输入框中响应enter键盘------介绍重要的onkeydown方法实现“模糊查找”
认知 行动 坚持
03-06 3万+
         在html输入框中响应enter键， 这本来就是很简单的问题， 但我查了一下网上资料， 多数写的有点复杂， 其实， 用onkeydown即可搞定， 如下：   &lt;html&gt; &lt;body&gt; &lt;input onkeydown="if(event.keyCode==13) {test()}"/&gt; &lt;script&gt; functio...
如何实时监听 input 和 textarea输入框值的变化
ruoyiqing的专栏
03-13 3万+
在实际前端开发中我们经常会遇到要实时监听用户的输入，根据不同的输入值来采取不同的措施。举一个常见的例子：我们在使用Google 搜索框进行搜索时，每多输入一个字，搜索框下方显示的匹配结果会实时变化。这样的效果就是通过实时监听搜索框的输入值变化从而提取不同的匹配结果来实现的。那么，一般使用最多的输入框就是 input 和 textarea 了。要想实时监听这两种输入框的值变化，就不得不提到键盘事件 k
JS判断键盘是否按的回车键并触发指定按钮点击操作
渴望飞的鱼的博客
03-21 1万+
代码如下：document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode || e.which) == 13) { var obtnLogin = document.getElementById("submit_btn"); ...
基于HTML5 Canvas的按键编码检测器
陈小峰（iefreer）的专栏
11-23 2313
通过keyup事件传递的变量，我们可以很容易的获取到用户所按下的按键编码。
JS中键盘事件及keyCode对照表
汉堡请不要欺负面条
06-01 2万+
一.Keycode对照表二.键盘事件1.键盘事件：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。keydown：按键按下keyup：按键抬起keypress：按键按下抬起2.使用时//jq的方式 $("input").keydown(function(){ $("input").css("background-color","#FFFFCC"); }); $(...
（12）HTML5-键盘按键事件监听
梧桐下的四叶草
09-01 9947
既然有鼠标事件，自然也有键盘按键事件可以使用了。在HTML5游戏中，键盘事件有许多重要的应用，例如调用快捷键功能，或是通过上下左右键（或wasd键）来控制游戏中角色的移动。常用的键盘按键事件包括：按下一个键（keydown），按住（keypress），放开（keyup）等。 {onKeyDown} 此事件可以检测玩家按下键盘上的某一个按键，并判断键值后做出相应的操作，此事件可用在,,,
Js-三大事件（鼠标事件、键盘事件、html事件）
热门推荐
qwer_df_b的博客
08-23 9万+
鼠标事件、键盘事件、html事件
JS中的键盘事件（onkeydown、onkeyup、keyCode）
Fantasc的博客
08-14 1万+
键盘事件： okeydown:键盘被按下，如果一直按着键盘的按键，则okeydown事件会一直被触发。 - 当键盘按键一直被按住的时候，事件被连续触发，第一次和第二次以及后面的n次之间，触发的时间间隔会稍长，在0.5秒左右（一直按着按键，事件连续触发，第一次触发之后会有0.5秒左右的延迟，后面的连续触发事件不会有延迟，延迟只在第一次和第二次之间）。这种设计是为了防止误操作。 在页面中需要判断按键是否被按下，可以用一个简单的例子进行测试，如下： <script type="text/javasc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值