实现H5中的placeholder功能

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<label for="">用户名:</label><input type="text" id="ipt">
	<script type="text/javascript">
		var ipt=document.getElementById('ipt');
		ipt.value="请输入用户名";
		ipt.style.color='gray';
		ipt.onclick=function(){
			if (this.value=="请输入用户名") {
				this.selectionStart=0;
				this.selectionEnd=0;
			}
		}
		ipt.onkeydown=function(){
			if (this.value=="请输入用户名") {
				this.value="";
				this.style.color='#000';
			}
		};
		ipt.onkeyup=function(){
			if (this.value.length==0) {
				this.value="请输入用户名";
				this.style.color='gray';
				this.selectionStart=0;
				this.selectionEnd=0;
			}
		}
</script>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5实现扫码功能,可以使用HTML5的API:getUserMedia和Canvas。具体步骤如下: 1.在HTML添加一个video标签和一个canvas标签,用于显示摄像头捕获的图像和绘制解码后的条形码。 2.使用JavaScript获取video和canvas元素,并调用getUserMedia方法请求用户授权访问摄像头。 3.在getUserMedia的回调函数,将摄像头捕获的图像绘制到canvas上,并使用Quagga.js库对图像进行解码,获取条形码数据。 4.将解码后的条形码数据填入输入框。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>扫码录入</title> </head> <body> <video id="video" width="640" height="480" autoplay></video> <canvas id="canvas" width="640" height="480"></canvas> <input id="input" type="text" placeholder="扫码结果"> <script src="https://cdn.bootcdn.net/ajax/libs/quagga/0.12.1/quagga.min.js"></script> <script> // 获取video和canvas元素 var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 请求用户授权访问摄像头 navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) { video.srcObject = stream; video.play(); }).catch(function(err) { console.log('访问摄像头失败:', err); }); // 监听video的canplay事件,开始绘制图像 video.addEventListener('canplay', function() { setInterval(function() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 解码条形码 Quagga.decodeSingle({ src: canvas.toDataURL(), numOfWorkers: 0, decoder: { readers: ['ean_reader'] }, locate: true }, function(result) { if (result && result.codeResult) { // 将解码结果填入输入框 document.getElementById('input').value = result.codeResult.code; } }); }, 100); }, false); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值