<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

        <title></title>

        <style type="text/css">

            #qrcode {

                width:160px;

                height:160px;

                margin-top:15px;

            }

        </style>

    </head>

    <body>

        <input id="text" type="text" value="http://www.baidu.com" /><br />

        <div id="qrcode"></div>

        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var qrcode = new QRCode("qrcode");

            function makeCode () {

                var elText = document.getElementById("text");

                if (!elText.value) {

                    alert("Input a text");

                    elText.focus();

                    return;

                }

                qrcode.makeCode(elText.value);

            }

            makeCode();

            $("#text").on("blur", function () { //

                makeCode();

            }).on("keydown", function (e) {

                if (e.keyCode == 13) {

                    makeCode();

                }

            });

        </script>

    </body>

</html>

效果预览：

jQuery 自动生成二维码的更多相关文章

  1. jquery自动生成二维码

    把下面的jquery代码放到想要在当前页面上面生成二维码: 代码如下: <script type="text/javascript">var _qrContent='' ...

  2. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  3. 使用jquery.qrcode生成二维码实现微信分享功能

    前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...

  4. jQuery.qrcode 生成二维码，并使用 jszip、FileSaver 下载 zip 压缩包至本地。

    生成二维码 引用 jquery.qrcode.js  :连接:https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.js .https:// ...

  5. 使用jquery.qrcode生成二维码（转）

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  6. （转）js jquery.qrcode生成二维码 带logo 支持中文

    场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...

  7. jquery动态生成二维码添加自定义logo

    动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...

  8. 简单的 自动生成 二维码 PHP 方法

    方法一:<style type="text/css">.eweima{    width:200px; height:200px; margin:auto;}</ ...

  9. jQuery前端生成二维码

    引用: <script src="assets/js/jquery.qrcode.min.js" charset="UTF-8"></scri ...

随机推荐

  1. pixi.js 简单交互事件(点击、缩放、平移)

    注意:本文代码使用的Pixi.js版本为PixiJS 5.3.3 pixi中常用的鼠标交互事件: //兼容鼠标和触摸屏的共同触发 type InteractionPointerEvents = &qu ...

  2. Windows无法访问共享文件夹

    问题描述 今天打开vss连接代码,提示如下信息 解决办法 可行:重置登录用户信息 原博文 https://zhidao.baidu.com/question/1174230805440255699.h ...

  3. MySQL管理基础

    #1.数据库连接管理 mysql命令说明 第一个功能:连接数据库(在前面mysql命令的使用里面讲解了,这里就不讲解了) 第二个功能:mysql客户端自带的命令功能 mysql命令的使用(mysql ...

  4. @Transient 注解

    使用 @Transient 表示该属性并非是一个要映射到数据库表中的字段,只是起辅助作用.ORM框架将会忽略该属性

  5. 关于opcache中opcache.revalidate_freq参数设置测试报告

    1.测试目的: 测试出opcache中,opcache.revalidate_freq这个参数最适合的大小 说明:如果opcache.revalidate_freq参数越大,服务器单位时间能接收的请求 ...

  6. java面向对象的一些知识

    (1)this和super关键字的用法 this表示调用本类实例方法和成员变量,this引用就是对一个对象的引用,如this.name  表示本类成员变量name,静态方法中不能使用this关键字. ...

  7. Adnc如何本地调试 - 一个轻量级的.Net Core微服务开发框架

    前言     Adnc是一个轻量级的.Net Core微服务开发框架,同样适用于单体架构系统的开发.     如果只是想本地调试,只需要安装必备软件,必备软件除开发工具外,其它软件建议大家都使用`do ...

  8. 为什么Elasticsearch不适合做数据存储？（转学习使用）

    一.问题描述 公司想尝试使用Elasticsearch来存一部分数据,以此缓解数据增长带来的对数据库的压力.在研究了一段时间后,发现Elasticsearch不适合作为数据存储使用. 二.理由如下 1 ...

  9. TCP三次握手（通俗易懂）

    一--导读 前不久中国和外国RPEC协议的签订,标志着东亚自贸区的建立成功.现在韩国和日本要做贸易.日本一直监听着韩国总统的一举一动,但他又不会主动.(服务器的监听状态)只是被动的等着韩国总统先开口. ...

  10. Syn_Flood攻击&防御手段

    Syn_Flood攻击原理 攻击者首先伪造地址对服务器发起SYN请求(我可以建立连接吗?),服务器就会回应一个ACK+SYN(可以+请确认).而真实的IP会认为,我没有发送请求,不作回应.服务器没有收 ...