Question

我试图给出一种方法，即用户可以对图像进行分析并在图像上进行写入，因此我可行的解决方案是在第二个文本字段更新时使用我们在第一个输入中引入的字符串。

以下是代码：

<form action="#" id="form_field">
    <input type="text" id="textfield1" value="" onChange="document.getElementById('textfield2').value=this.value">
    <input type="text" id="textfield2" value="">
</form>

是否有任何表格可以插入＆＃34;输入文字＆＃34;在图像上？我会在那之后用css隐藏盒子，所以看起来你可以在图像上写一些东西。

Answer 1

您可以使用绝对位置的输入。

看看： http://jsfiddle.net/x60cgyeh/2/

<form action="#" id="form_field">
    <input type="text" id="textfield2" value="" placeholder="Insert image title...">
    <img src="http://dummyimage.com/300/eee/aaa">
</form>

和CSS

#form_field {
    position:relative;
    width:300px;
}

#textfield2 {
    position:absolute;
    background:transparent;
    border:0;
    color:#000;
    font-size:20px;
    text-align:center;
    width:100%;
    top:20px;
    outline:none;
}

Answer 2

您需要使用哪些浏览器才能使用它？如果它只是现代的那么你可以设置输入字段本身的大小和背景图像。

请参阅：html input with background image

Answer 3

您可以使用CSS将背景图片分配到<form>标记： jsFiddle.

HTML：

<form action="#" id="form_field">
    <input type="text" id="textfield1" value="" onChange="document.getElementById('textfield2').value=this.value" placeholder="Enter Image Title">
    <input type="text" id="textfield2"  placeholder="Enter Image Description" value="">
</form>

CSS：

form#form_field {
    width: 600px;
    height: 359px;
    background-image: url(//bg image url)
}
form#form_field input {
    background: transparent;
    border: none;
    width: 100%;
    text-align: center;
    font-size: 25px;
    margin-top: 100px;
    color: white;
}
form#form_field input:focus {
    outline: none;
}

在图像上重叠“输入文本”

3 个答案: