QRCode.js生成二维码
https://github.com/KeeeX/qrcodejs
该版本解决了主版本（https://github.com/davidshimjs/qrcodejs）中出现的长度溢出的问题；
示例代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Javascript 二维码生成库：QRCode</title>
<style>
body{
text-align: center;
}
input[name='content']{
width: 200px;
margin-top: 10px;
}
div#qrcode{
width: 100px;
height: 100px;
border: 1px dashed #aaa;
margin: 0 auto;
margin-top: 15px;
}
textarea{
width: 198px;
height: 120px;
display: block;
margin: 0 auto;
}
</style>
</head> <body>
<input name="content" id="oneline_text" value="mail: 812852259@qq.com" />
<textarea id="multiline_text">姓名：123456
邮箱：123456789@qq.com</textarea>
<div id="qrcode"></div>
<script type="text/javascript" src="你自己的路径\qrcode.min.js"></script>
<script>
const input = document.getElementById("oneline_text");
const textarea = document.getElementById("multiline_text");
const qrcode = new QRCode(document.getElementById("qrcode"), {
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.L
}); function makeCode(value) {
if (!value) {
alert("Input a text !!!");
return;
} qrcode.makeCode(value);
}
input.addEventListener("blur", function(){
makeCode(this.innerText || this.value);
});
input.addEventListener("keydown", function(e){
if (e.keyCode === 13) {
makeCode(this.innerText || this.value);
}
});
textarea.addEventListener("blur", function(){
makeCode(this.innerText || this.value);
});
</script>
</body> </html>
qrcode实现二维码单行展示使用input,
qrcode实现二维码多行展示使用textarea
qrcode的配置参考：
QRCode.js生成二维码的更多相关文章
- qrcode.js生成二维码因字符串过长而报错
前端使用qrcode.js生成二维码的时候.有时候是会出现 qrcode length overflow (1632>1056) 目前使用的有效的解决办法是重新下载新版的qrcode.js 下载 ...
- 使用jquery.qrcode.js生成二维码
通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...
- QRCode.js 生成二维码
QRCode.js 是一个用于生成二维码图片的插件. github地址 在线实例 实例预览 基础示例 实例预览 API 接口 使用方法 载入 JavaScript 文件 <script src= ...
- 利用vcard和qrcode.js生成二维码导入联系人
vCard是一种容许交换个人信息的数据规范,vCard数据格式的标识符是VCARD,vCard数据格式行是: 类型 [;参数]:值,具体的介绍百度都有,我们可以通过vcard来进行通讯录的保存,名片的 ...
- 转: jquery.qrcode.js生成二维码插件&转成图片格式
原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...
- 【QRcode二维码】：使用JS前端插件QRcode.js生成二维码
1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...
- qrcode——js生成二维码
1.引入 qrcode.min.js(点击下载demo) 2.html: <div id="qrcode"></div> js: var qrcode = ...
- nuxt使用QRCode.js 生成二维码
QRCode.js 是一个用于生成二维码图片的插件, 官方文档 . 我是在nuxt.js(vue官方的服务端渲染方式)项目里使用的QRCode.js: 第一步:看官方文档: 第二步:下载QRCode. ...
- jquery.qrcode.js生成二维码（前端生成二维码）
官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...
随机推荐
- vue版 弹幕
效果: 下载 优化版下载: https://pan.baidu.com/s/1mvKGwJsBjXd2hvvi5Rp9pA 用法: import barrage from '../components ...
- hbase的api操作之scan
扫描器缓存---------------- 面向行级别的. @Test public void getScanCache() throws IOException { Configu ...
- SqlServer 查看最近执行过的语句
查看系统中最近执行的语句 ST.text AS '执行的SQL语句', QS.execution_count AS '执行次数', QS.total_elapsed_time AS '耗时', QS. ...
- 使用EasyPOI导出excel示例
package com.mtoliv.sps.controller; import java.io.IOException; import java.io.OutputStream; import j ...
- EF开发中EntityFramework在web.config中的配置问题
异常: 未找到具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序的实体框架提供程序.请确保在应用程序配置文件的“entityFramework”节中注册了该提供程序 ...
- yeoman 前端自动化构建工具 generator-fountain-webapp
直接上我的github地址. https://github.com/631535199/yo-react
- EasyUI的textbox的disable ,readonly 用法
EasyUI的textbox,如果用了disable, 那么提交时,后台mvc controller是取不到值的, 如果用了Readonly, textbox的样式又没有变化, 让人一眼就感知到哪些是 ...
- Java 开发笔记
共同学习,以下内容,随时更新. 前端 1.前端页面'是单引号的转义符,"是双引号. 问题(前端JS进行参数传递时,使用的是单引号扩住变量,但是变量形式为 2019-27 ...
- 小白的python之路10/30磁盘分区
总结:fdisk mkfs mount 1.磁盘分区 硬盘分区有三种,主磁盘分区.扩展磁盘分区.逻辑分区. 一个硬盘主分区至少有1个,最多4个,扩展分区可以没有,最多1个.且主分区+扩展分区总共 ...
- SharedPreference映射Java类
package com.overlook.weagree.util; import android.app.Activity; import android.content.Context; impo ...