网页生成二维码-二维码实现部分JS

原创

youyeye 2023-12-07 23:50:48 博主文章分类：前端 ©著作权

©著作权归作者所有：来自51CTO博客作者youyeye的原创作品，请联系作者获取转载授权，否则将追究法律责任

学习网址：

https://blog.csdn.net/lplovewjm/article/details/134524616?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170196314316800182167638%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170196314316800182167638&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-134524616-null-null.142

二维码实现部分

<script type="text/javascript">
    /* 新建一个QRcode对象 */
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        // 二维码宽高
        width: 100, // 100px
        height: 100 // 100px
    });

    function makeCode() {
        /* 函数用于判断输入框中是否输入值，如果没输入并回车则弹窗提示请输入，
                       如果输入值了并回车则调用clear方法清除之前生成的二维码。
                       再调用QRcode自带的参数是url的值的makeCode方法生产二维码。
                     */
        // 根据ID来获取元素elText
        var elText = document.getElementById("text");
        // console.log(elText);
        // console.log(elText.value);

        // elText的值是否为空，为空则爆出弹窗提示
        if (!elText.value) {
            alert("请输入URL");
            elText.focus();
            return;
        }
        qrcode.clear();  // clear方法用来清除之前生成的二维码
        qrcode.makeCode(elText.value);
    }

    makeCode();
    let text = document.getElementById('text')
    text.addEventListener('keydown', function(e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    })
</script>

网页生成二维码-二维码实现部分JS_回调函数

.focus()方法

var elText = document.getElementById("text");
// console.log(elText);
// console.log(elText.value);

// elText的值是否为空，为空则爆出弹窗提示
if (!elText.value) {
    alert("请输入URL");
    elText.focus();
    return;
}

在JavaScript中，.focus()是一个方法，用于将焦点设置到指定的元素上。当一个元素获得焦点时，它通常会变成活动的或可交互的状态。
该方法可用于各种HTML元素，如文本框、按钮等。通过调用元素的.focus()方法，可以将焦点移动到该元素上，使其成为用户当前活动的元素。（调用了该元素的.focus()方法，将其设置为当前活动的元素。）

网页生成二维码-二维码实现部分JS_回车键_02

addEventListener

text.addEventListener('keydown', function(e) {
    ...
})

addEventListener是JavaScript中用于为元素添加事件监听器的方法。它接受两个参数：
事件类型（字符串）：表示要监听的事件类型，如"click"、"mouseover"等。
回调函数（函数）：当指定的事件发生时，将执行该回调函数。回调函数通常接收一个事件对象作为参数，可以通过该对象获取事件的相关信息。

网页生成二维码-二维码实现部分JS_回调函数_03

键盘监听事件

let text = document.getElementById('text') // 获取input元素
// 监听键盘回车事件
text.addEventListener('keydown', function(e) {
    // addEventListener方法用来监听键盘事件，
    // 第一个参数是键盘事件的类型，第二个参数是回调函数。
    // 回调函数中e是事件对象，e.keyCode是键盘按键的键值，13是回车键
    if (e.keyCode == 13) {
        // keyCode是键盘按键的键值，13是回车键.
        // 这里就是如果回车键按下了，就调用makeCode方法生成二维码
        makeCode();
    }
})

这段代码是用于在网页中监听键盘回车事件，并在按下回车键时调用makeCode()方法生成二维码。
首先，通过document.getElementById('text')获取页面上ID为'text'的元素，并将其赋值给变量text。
然后，使用addEventListener方法监听该元素的键盘事件。当按下键盘上的某个键时，会触发相应的事件处理函数。在这个例子中，监听的是keydown事件，即按下键盘上的任意键。
在事件处理函数中，通过判断e.keyCode的值是否等于13来判断是否按下了回车键。如果按下了回车键（即e.keyCode == 13），则调用makeCode()方法生成二维码。

网页生成二维码-二维码实现部分JS_QR码_04