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 ...
随机推荐
- jquary 选择器，dom操作知识点
选择器: 1. 基本选择器 1. 标签选择器(元素选择器) * 语法: $("html标签名") 获得所有匹配标签名称的元素 2. id选择器 * 语法: $("#id的 ...
- 博弈论初步（SG函数）
讲解见此博客https://blog.csdn.net/strangedbly/article/details/51137432 理解Nim博弈,基于Nim博弈理解SG函数的含义和作用. 学习求解SG ...
- Linq语句jion on后指定多个条件
代码如下: private void FrmMain_Load(object sender, EventArgs e) { var list1 = Supplier.GetSuppliers(); v ...
- 【转】PO/POJO/BO/DTO/VO的区别
PO :persistent object持久对象 1 ．有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录. 2 ．在hibernate持久化框架中 ...
- ie8遇到的那些事
IE一直是我们津津乐道的浏览器,他的奇葩想必各位在开发之路上都不断的遇到了,其恶心程度就不必说了,我们公司主要是IE的浏览器,这次我就把我遇到的不兼容问题列举下来,欢迎大家补充.此举只发表IE8以上的 ...
- Python GUI之tkinter
https://blog.csdn.net/yingshukun/article/details/53985080 设置背景图:https://blog.csdn.net/rikkatakanashi ...
- 20175212童皓桢 Java实验二-面向对象程序设计实验报告
20175212童皓桢 Java实验二-面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设 ...
- 图片转成Base64
var img = "imgurl";//imgurl 就是你的图片路径 function getBase64Image(img) { var canvas = document. ...
- java打印系统时间
public class Time { public static void main(String[] args) { Date t = new Date(); DateFormat ti = ne ...
- Tomcat启动后，访问页面报404错误解决方法
Tomcat正常启动后,出现如下情况 提供一个参考解决方法: 1.双击servers 2.把Server Locations设置为User Tomcat installation 保存后再次访问页面就 ...