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 ...
随机推荐
- 正向代理or反向代理
正向代理 我访问不了某网站比如www.google.com,但是我能访问一个代理服务器 这个代理服务器呢,它能访问那个我不能访问的网站,于是我先连上代理服务器,告诉它我需要那个无法访问网站的内容,代理 ...
- 同步请求和异步请求的区别,ajax异步请求如何理解
同步请求和异步请求的区别 先解释一下同步和异步的概念 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的 ...
- JAVA写接口傻瓜（$）教程（三）
接上一篇 补充:事实上java的类需要在src文件夹里写,classes文件夹只是会同步src文件夹里的类.如果在classes文件夹里操作java类,是会提示文件只读的.src文件夹中进行代码编写 ...
- 爬虫（九）scrapy框架简介和基础应用
概要 scrapy框架介绍 环境安装 基础使用 一.什么是Scrapy? Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,非常出名,非常强悍.所谓的框架就是一个已经被集成了各种功能 ...
- js前端性能优化之函数节流和函数防抖
前言:针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最 ...
- c# winform Chart Pie 中若X轴数据为字符串时，#VALX取值为0
https://q.cnblogs.com/q/83848/ 在winform程序中用自带的Chart进行画图表时,若画饼图,其中X轴数据为字符串,这时候如果想设置Label值的格式为#VALX:#V ...
- IntelliJ IDEA 注册码——亲测有效
链接地址:http://idea.lanyus.com 使用时需要将“0.0.0.0 account.jetbrains.com”添加到hosts文件中,mac操作hosts文件可以参考链接: htt ...
- Excel文件数据导入到后台保存倒数据库
后台代码数据解析: 方法一: (简单点) import org.apache.poi.hssf.usermodel.HSSFCell;import org.apache.poi.hssf.usermo ...
- 常见IO模型
在socket的通信中,recv,accept,recvfrom(UDP协议接收信息)这些阶段由于需要收到信息,才能继续下面的代码,所以这些阶段叫做阻塞,类似于我们python变成中的input函数, ...
- mysql插入中文报错的问题
报错:1366, "Incorrect string value: '\\xE6\\xB7\\xB1\\xE5\\x85\\xA5...' for column ' 由于公司原因之前一直在使 ...