JS 键盘事件、防止页面元素被复制

2017-08-15 15:14:57 Albin Wong 444

## 键盘事件
```html
<input type="text" id="username" value="iloveyou">
<script type="text/javascript">
    //获取元素
    var username = document.getElementById('username');
    // on 当...时候  key按键  down向下的
    username.onkeydown = function() {
        console.log('键盘被按下了哦!!!!down');
    }

//press 按压
    username.onkeypress = function() {
        console.log('键盘按下了  press')
    }
    
    //up 
    username.onkeyup = function() {
        console.log('键盘抬起来了!!! up');
    }
    
    //获取input元素的值
    var value = username.value;
    username.value = 'imissyou';
</script>
```

#### e.g. 将input元素中的值变成大写
```html
<input type="text" id = "user">
<script type="text/javascript">
var user = document.getElementById('user');

user.onkeyup = function() {
    //获取当前input元素的值
    var v = this.value.toUpperCase();
    //修改元素的值
    this.value = v;
}
</script>
```

#### e.g. 组合键
```javascript
window.onkeydown =function(e) {
    //获取keyCode属性
    var key = e.keyCode;
    if(key == 49 && e.ctrlKey == true){
        alert('正在加血!!!!');
    }
    
    if(key == 50 && e.shiftKey == true){
        alert('正在加蓝!!!');
    }
    
    if(key == 51 && e.altKey == true) {
        alert('正在放大招!!!');
    }

return false;
}
```

#### 键盘移动div
```html
* {
    margin:0px;
    padding:0px;
}
#move {
    position:absolute;
}
<div id="move" style="width:200px;height:200px;background:#456987"></div>
<script type="text/javascript">
var move = document.getElementById('move');

window.onkeydown = function(e) {
    // console.log(e);
    var key = e.keyCode;
    switch(key) {
        case 37:
            moveLeft();
            break;
        case 38:
            moveUp();
            break;
        case 39:
            moveRight();
            break;
        case 40:
            moveDown();
            break;
    }
}

function moveRight() {
    //获取当前元素距离左侧的偏移量
    var l = move.offsetLeft;
    //
    var newLeft = l + 5;
    //设置
    move.style.left = newLeft + 'px';
}

function moveLeft() {
    //获取当前元素距离左侧的偏移量
    var l = move.offsetLeft;
    //
    var newLeft = l - 5;
    //设置
    move.style.left = newLeft + 'px';
}

function moveUp() {
    var t = move.offsetTop;
    var newTop = t - 5;
    move.style.top = newTop + 'px';
}

function moveDown() {
    var t = move.offsetTop;
    var newTop = t + 5;
    move.style.top = newTop + 'px';
}
</script>
```

#### 防止页面元素被复制
```html
<p>在计算机中，所有的数据在存储和运算时都要使用二进制数...拉丁文字字母。</p>
<script type="text/javascript">
    // 阻止右键
    window.oncontextmenu = function(){
        return false;
    }
    
    //键盘按下事件
    window.onkeydown = function(e) {
        // console.log(e);
        if(e.ctrlKey == true && e.keyCode == 67) {
            return false;
        }
    }
</script>
```

(3) Comments

John Doe- Reply

February 26, 2013 at 1:18 pm
- saqib sarwar- Reply
  
  February 26, 2013 at 1:20 pm
  
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
John Doe- Reply

February 26, 2013 at 1:27 pm

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Comment

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

JS 键盘事件、防止页面元素被复制

(3) Comments

John Doe- Reply

saqib sarwar- Reply

John Doe- Reply

Leave a Reply