Question

我还在一些帖子中搜索过，但我还没想到。

目标：我有一个图像（一个黄色的帖子280px x 280px）现在，我希望能够在用户按下按钮后将文本放在便利贴上，例如“文本”。我坚持与HTML，但不是真的与JavaScript。非常感谢你！马丁

Answer 1

我就是这样做的。

使用带有便利贴图像的div作为背景，其中有一个用于音符的子div。

<div class='post-it'>
    <div class="note">
    </div>
</div>

div.note可以轻松定位，以便与图像不重叠。

.post-it {
    background-image: url('http://alternatewrites.com/wp-content/uploads/2012/06/post-it-note-with-a-pin.jpg');
    background-repeat: no-repeat;
    width: 321px;
    height: 321px;
    position: relative;
}
.note {
    position: absolute;
    top: 90px;
    right: 30px;
    bottom: 30px;
    left: 60px;
    overflow: auto;
}

然后JavaScript非常简单：

// Execute after DOM has loaded
window.onload = function() {
    var postIt = document.getElementsByClassName('post-it'),
        addTextToNote = function () {
            //"this" is the textarea because the function is bound to the textarea;
            var note = this.parentNode,
                postIt = note.parentNode;
            note.removeChild(this);
            note.innerText = this.value;
            postIt.onclick = addTextArea;
        },
        addTextArea = function addTextArea() {
            //"this" is the div with class "post-it" because the function is bound to it;
            var note = this.getElementsByClassName('note'),
                t = null,
                i = 0;
            for (i = 0; i < note.length; i += 1) {
                t = document.createElement('textarea');
                t.rows = 10; // 10 rows and 25 columns is about
                t.cols = 25; // the correct size for the image
                t.value = note[i].innerText; // add any existing text
                t.onblur = addTextToNote;
                note[i].appendChild(t); // add textarea to note
                this.onclick = null; // remove click handler to prevent multiple click problems
                t.focus(); // give focus to the textarea
            }
        },
        i = 0;
    for (i = 0; i < postIt.length; i += 1) {
        postIt[i].onclick = addTextArea;
    }
};

请注意，在生产环境中，我也可能会使用jQuery，因为我发现DOM操作的语法更简单（并且它是跨浏览器，与上面的示例不同）。

这是一个jsFiddle演示：http://jsfiddle.net/gWf5Z/

Answer 2

使用你的图像我建议将它放入div元素中，以便更容易追加。使用javascript，我会执行以下操作：

addText(){
    var ele = document.createElement("p");
    ele.appendChild(document.createTextNode('your text'));
    document.getElementById('yourDiv').innerHTML(ele);

}
document.getElementById('yourButton').addEventListener('click', addText(), false);

据我所知，这应该是正确的。有更简单的方法。例如，这是一个CSS替代品。

HTML

<div id="wrapper">
    <p>text</p>
</div>

CSS

#wrapper {background-image:url('post-it.png');}
#wrapper > p {display:none;}
#wrapper > img:hover p{display:block;}

在img上动态添加文本

2 个答案: