<!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. SQL 视图 临时表 存储过程 索引 事务

    视图: 视图是按照你的sql语句生成的一个虚拟的东西,本身并不占数据库的空间 创建视图 create view view_1 as select id from table_1 当你表里的数据增加或者 ...

  2. 5.装饰模式 Decorator （单一职责）

    结合: Android设计模式 006 装饰者模式  [B站]对整个重构的细节讲的容易懂 Android的设计模式-装饰者模式   [简书]结合安卓源码讲的还可以,让我对context有更深入的理解 ...

  3. 7.自定义ViewGroup-下滑抽屉

    1.效果 2.思路 分析效果: 1.布局分为两部分,后面部分,前面部分,默认状态后面被挡住: 2.后面不可以滑动,前面可以滑动: 3.如果前面的布局本身是可以滑动的,那么当前面布局滑动到第一个时,后面 ...

  4. Android面试系列一

    什么是ANR,如何避免它 ​ ANR是应用程序无响应(Application Not Responding)的的英文缩写: ​ 当Android 手机在一段时间响应不够灵敏,系统会向用户展示一个对话框 ...

  5. JDBC学习（错误反思）

    注意拼写错误!!! 注意拼写错误!!! 注意拼写错误!!!  文档注释快捷键   alt+shift+J    

  6. 关于git的一些零碎知识

    git文件的三个状态:已修改,已暂存,已提交git的三个区域: 工作区,暂存区,对象库 git的几个指针(以master为例) 远程有个master,本地有个master,本地有个指针是指向远程的ma ...

  7. Maven安装配置和IDEA创建Maven项目

    maven 一个项目架构管理工具(约定大于配置) 1.配置 M2_HOME:指向maven bin目录 以后bootstrop要用 MAVEN_HOME:指向maven目录 path:指向maven ...

  8. TurtleBot3使用课程-第一节a（北京智能佳）

    目录 1.ROS设置(远程PC) 2 1.1 ROS安装和设置 2 1.1.1 设置source.list 2 1.1.2 键设置 2 1.1.3 ROS安装 2 1.1.4安装包构建的依赖关系 2 ...

  9. Go语言从入门到放弃(结构体常见的tag)

    什么是tag Tag是结构体中某个字段别名, 可以定义多个, 空格分隔 type Student struct {     Name string `ak:"av" bk:&quo ...

  10. 你还不知道mysql中空值和null值的区别吗？

    前言 最近发现带的小伙伴写sql对于空值的判断方法不正确,导致程序里面的数据产生错误,在此进行一下整理,方便大家以后正确的判断空值.以下带来示例给大家进行讲解. 建表 create table tes ...