js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言
一、总结
一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的。
1、如何判断同时按下了ctrl键和回车键?
25 $('#txt1').keydown(function(e){
26 if (e.which==13&&e.ctrlKey) {
2、实现组合按键提交留言时候的事件监听对象是谁?
input 文本框
25 $('#txt1').keydown(function(e){
26 if (e.which==13&&e.ctrlKey) {
3、如何实现按下组合键提交留言?
实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的。
25 $('#txt1').keydown(function(e){
26 if (e.which==13&&e.ctrlKey) {
27 var str1=$('#txt1').val()
28 var str2=$('#txt2').val()
29 str2+=str1+'\n'
30 $('#txt2').val(str2)
31 $('#txt1').val('')
32 }
33 })
4、回车键和ctrl键的键码分别是多少?
13 和 e.ctrlKey
26 if (e.which==13&&e.ctrlKey) {
二、jquery如何实现通过点击按钮和按下组合键两种方式提交留言
1、相关知识
提交留言
案例描述:通过点击按钮和按下组合键两种方式提交留言.
案例重点:该案例本身非常简单,目的在于提高大家应用学过的知识点解决实际的问题的能力。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
#txt1,textarea{width: 200px}
</style>
</style>
</head>
<body>
<input type="text" id="txt1"><br><input id="btn1" type="button" value="提交"><br>
<textarea id="txt2" rows="10" cols="30"></textarea><br>
<script>
$('#btn1').click(function(){
var str1=$('#txt1').val()
var str2=$('#txt2').val()
str2+=str1+'\n'
$('#txt2').val(str2)
$('#txt1').val('')
})
$('#txt1').keydown(function(e){
if (e.which==13&&e.ctrlKey) {
var str1=$('#txt1').val()
var str2=$('#txt2').val()
str2+=str1+'\n'
$('#txt2').val(str2)
$('#txt1').val('')
}
})
</script>
</body>
</html>