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 ...
随机推荐
- php 两次encodeURI,解决浏览器跳转请求页乱码报错找不到页面的bug
Not Found The requested URL /index.php/XXX/mid/97329240798095910/bname/3000T/D/sname/水泥粉磨/un ...
- numpy 数组索引数组
在numpy中,数组除了可以被整数索引,还可以被数组索引． a[b]就是已数组b的元素为索引,读取数组a的值． 当被索引数组a是一维数组,b是一维或则多维数组时,结果维度维度与索引数组b相同. a = ...
- ionic2 获取dom节点
ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于ge ...
- php代码审计——DVWA
1.命令注入: LOW等级: 输入没有任何限制,可以直接ping: Medium等级: 介绍一下str_replace()函数和array_key()函数: Str_replace(str1,str2 ...
- ashx导出dataTable为Excel
一,datatable导出Excel,用户可以选择路径,方法如下: /// <summary> /// DataTable导出到Excel /// </summary> /// ...
- React文档（十八）最佳性能
在内部,React使用好几种聪明的技巧去最小化更新UI所需要的DOM操作.对于很多应用来说,使用React会使得构建用户界面非常之快而且不需要做太多专门的性能优化.虽然如此,还是有一些方法可以让你为R ...
- Flask Vue.js全栈开发
Flask Vue.js全栈开发的 最新完整代码 及使用方式 本系列的最新代码及使用方式将持续更新到: http://www.madmalls.com/blog/post/latest-code/ 1 ...
- CSS中的单位px、em、rem、%、vw、vh、vm
px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...
- 新建ui文件及相应.h和.cpp文件
1.在Qt Creator中新建一个任意的项目(如untitled): 2.在该项目中添加QT设计师界面类: 3.将新建的3个文件(.ui..h..cpp)拷贝到目标项目文件夹中: 4.分别在目标 ...
- 转载：Shell 脚本加密 - 略有修改
shc是一个加密shell脚本的工具.它的作用是把shell脚本转换为一个可执行的二进制文件. shc 安装 yum -y install shc 如果yum不能安装,请移步官方下载rpm包 http ...