使用 JavaScript 将 qr 码生成的值放入输入字段的问题

Posted

技术标签:

【中文标题】使用 JavaScript 将 qr 码生成的值放入输入字段的问题【英文标题】：Problems on the generated value of the qr code into a input field using JavaScript 【发布时间】：2018-12-03 09:48:08 【问题描述】：

javascript 代码和 html 代码

我正在尝试将生成的 qr 码值作为要保存在我的 SQLite 数据库中的输入文本，但无法推送 qr 码的该死值

var resultDiv;

document.addEventListener("deviceready", init, false);

function init() 
    document.querySelector("#startScan").
        addEventListener("touchend", startScan, false);
	
	resultDiv = document.querySelector("#results");//works in <p id="results"></p>
	
	resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
	


function startScan() 

	cordova.plugins.barcodeScanner.scan(
        
        function (result) 
			var s = result.text.split('|');
            result.format;
			result.cancelled;

			resultDiv.innerHTML = s;
        , 
        

		function (error) 
			alert("Scanning failed: " + error);
		
	);
	



JavaScript codes and HTML codes
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qrBorrowers</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <script type="text/javascript" src="cordova.js"></script>

    <nav>
        <div class="topnav">
            <a href="add.html">Add</a>
            <a href="borrow.html">Borrow</a>
            <a href="return.html">Return</a>
            <a href="generate.html">QR code</a>
        </div>
    </nav>

    <Label>
        <h1> &nbsp; Borrow a Book </h1>
    </Label>

    <div class="borrow">


        <input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>

        <input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />

        <input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />

        <input id="text4" type="text" placeholder="Book Info"/>

        <input id="text6" type="date" placeholder="Date Borrowed" />

        <br>

    </div>

    <div class="borrow">
        
        <p id="results"></p>

        <button id="startScan">Start Scan</button>

        <button id="savedb">Save </button>

    </div>

    <script type="text/javascript" src="js/scanQR.js"></script>

</body>

</html>

【问题讨论】：

【参考方案1】：

使用内部 HTML，它不会将生成的二维码保存到输入框。您需要将 innerHTML 更改为 value 以将值保存在输入框中，以便您可以在表单提交时使用它作为值保存在数据库中。 

var resultDiv;

document.addEventListener("deviceready", init, false);

function init() 
    document.querySelector("#startScan").
        addEventListener("touchend", startScan, false);
	
	resultDiv = document.querySelector("#results");//works in <p id="results"></p>
	
	resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
	


function startScan() 

	cordova.plugins.barcodeScanner.scan(
        
        function (result) 
			var s = result.text.split('|');
            result.format;
			result.cancelled;

			resultDiv.value = s;
        , 
        

		function (error) 
			alert("Scanning failed: " + error);
		
	);
	



JavaScript codes and HTML codes
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qrBorrowers</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <script type="text/javascript" src="cordova.js"></script>

    <nav>
        <div class="topnav">
            <a href="add.html">Add</a>
            <a href="borrow.html">Borrow</a>
            <a href="return.html">Return</a>
            <a href="generate.html">QR code</a>
        </div>
    </nav>

    <Label>
        <h1> &nbsp; Borrow a Book </h1>
    </Label>

    <div class="borrow">


        <input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>

        <input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />

        <input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />

        <input id="text4" type="text" placeholder="Book Info"/>

        <input id="text6" type="date" placeholder="Date Borrowed" />

        <br>

    </div>

    <div class="borrow">
        
        <p id="results"></p>

        <button id="startScan">Start Scan</button>

        <button id="savedb">Save </button>

    </div>

    <script type="text/javascript" src="js/scanQR.js"></script>

</body>

</html>

【讨论】：

【参考方案2】：

保存输入框中的值不应该使用“resultDiv.innerHTML = s;” 相反，您应该使用“resultDiv.value = s”，它将您的代码保存到输入框，您可以使用它保存在 SQLite 数据库中。

【讨论】：

以上是关于使用 JavaScript 将 qr 码生成的值放入输入字段的问题的主要内容，如果未能解决你的问题，请参考以下文章

使用 FreePascal 将 QR 码转换为 WMF 流

在PHP中生成动态QR码

我必须使用哪些数据来为 Google Authenticator 生成 QR 码？

为啥某些 Apple Wallet 生成的 QR 码包含这么多额外的垃圾？

csharp 使用Google API生成QR码

csharp 使用Google API生成QR码