我正在使用HTML5 Canvas从事某种名片制造商的工作。
要获取自定义名称,地址等...我目前正在使用PROMPT Box ...
现在我得到的是:
定义变量
var name = prompt("Votre nom","")
var address = prompt("Votre adresse","")
var title = prompt("Votre titre","")
然后在画布上绘制它:
img.onload = function(){
oCtx.drawImage(img,0,0);
oCtx.font = "normal 25px arial"; // different font
oCtx.textBaseline = "top"; // text baseline at the top
oCtx.fillStyle = "#00529e";
oCtx.fillText(address, 283, 138);
oCtx.font = "bold 45px arial"; // different font
oCtx.fillText(name, 283, 350);
oCtx.font = "normal 40px arial"; // different font
oCtx.fillText(title, 283, 410);
};
img.src="back.png";
从“提示”框中获取价值非常有用。
但是我想做一些更清洁的事情,而改为用户文本框。
因此,这个家伙只需要在Canvas旁边输入一个文本框,然后在他输入文本框时,它就会自动更新“名称”变量或“地址”或“标题”的内容。
我该如何工作?
编辑
这是我尝试过的...但是那不起作用:
<input type="text" id="testing"/>
我将在此文本框中输入内容,然后进行更新:
oCtx.fillText(document.getElementById('testing').value), 282, 138);
现在是:
oCtx.fillText(address, 282, 138);
谢谢
编辑2
我试过了 :
document.getElementById("testing").addEventListener("change", function() {
var val = document.getElementById("testing").value;
// now use val in your existing fillText code
});
“测试”是我的文本框的ID ...
我将fillText更改为:
oCtx.fillText(val, 282, 138);
但是,当我在文本框中输入内容时,什么也没发生...知道为什么吗?
最佳答案
在文本区域上使用keypress
处理程序:
document.getElementById("mytextbox").addEventListener("keydown", function() {
var val = document.getElementById("mytextbox").value;
// now use val in your existing fillText code
});
请注意,您可以使用
change
事件而不是keydown
事件,但是change
仅在用户将焦点从文本框移开后才会触发。 keypress
事件的作用与keydown
类似,但不会捕获退格键。那应该让您开始!