textarea上的图像 - JS / CSS

Question

我想绘制一个表格，其中会有一些textarea，在textarea上会有一个小图像[图像的大小将小于textarea的大小]，点击图像将调用函数fx （） 任何人都可以在JavaScript / jquery / CSS中为我编写代码吗？

在此图像中，GO是图像，单击它将调用Fx（）

我尝试了它并且失败了（并且不知道如何在图像上附加功能）

.searchform {
display: inline-block;
padding: 3px 5px;
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
}


<form class="searchform">
<input id="t" class="searchfield" value="Search..." type="text">
<input class="searchbutton" value="Go" type="button">
</form>

Answer 1

我会做的是

• 将“go”元素放在textarea之前，将其设为position: absolute，使其悬停在该区域的左上角

• 在元素

周围放置一个position: relative的包装器

• 使用jQuery的.width()和.height()函数调整“go”元素的位置。

HTML：

<div id="wrapper">
<div id="go">Go</div> 
<textarea id="area" rows=33 cols=22></textarea>
</div>

CSS：

#wrapper { position: relative }
#go { width: 16px; tpp: 16px; position: absolute; background-color: yellow }

JS：

$(function(){
$("#go").css("left", $("#area").width() - $("#go").width());
$("#go").css("top", $("#area").height() - $("#go").height());
});

http://jsfiddle.net/WUnQW/

有一个更简单的方法，根本不需要JavaScript，但使用display: inline-block在IE6 / 7中无法正常工作（虽然我想它可以通过使用{{在IE7中工作） 1}}而不是span的{​​{1}}。

http://jsfiddle.net/WUnQW/6/

Answer 2

除非是背景图像，否则无法在textarea中放置图像标记。要解决此问题，请使用带有contentEditable属性的div。这将像textarea一样，允许您在其中插入<img>标记。这就是WYSIWYG编辑的工作方式。然后使用simpe CSS，您可以将图像置于右下角。

<div contentEditable="true"> type here
 <img id="textimg" src="..." />
</div>

要在单击图像时运行功能fx()，您可以执行此操作。

function fx() {
    alert('this is a function');
}
$('#textimg').click(fx);

检查http://jsfiddle.net/6bCRJ/4/

处的工作示例

Answer 3

您可以将图像包装到锚<div><a ... ><Image /></a>.</div>中，然后可以调用click属性。然后使用CSS绝对定位<div>