Question

我有一个div“转换”成textarea。好吧，当有人点击div时，它会显示一个隐藏的文本区域。 div将隐藏，textarea将获得div的innerHTML。用户现在可以编辑文本，在他或她完成之后我希望他们在文本区域外单击。现在textarea隐藏了，div再次显示更新的html内容。

但目前它没有按预期工作。如何检测用户在textarea外部点击的时间？是否有.not()等同于jQuery？用户还应该能够调整textarea的大小。目前它在调整大小后关闭。有什么想法吗？

这是一个小提琴： http://jsfiddle.net/t3qRL/

这里是HTML：

<div class="media_box">
    <div class="label"> Textfeld:</div>
    <!-- with the property contentEditable the div would be editable but there would be no linebreaks -->
    <div class="txt_area"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id nunc quis purus aliquam sollicitudin porta nec dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis eleifend dignissim. Curabitur ligula est, rhoncus eget lobortis accumsan, volutpat et lorem. Suspendisse augue mauris, mollis et lectus at, sodales pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In rutrum est vitae justo ullamcorper malesuada.
    </div>
    <textarea class="cright_txtarea" style="display: none">
    </textarea>
</div>

JS：

document.observe('dom:loaded', function () {
    $$('body')[0].on('click', '.txt_area', function (event, element) {
        event.stopPropagation();
        var div_text = element.innerHTML;
        element.hide();
        var text_area = element.next('textarea');
        text_area.show();
        text_area.value = div_text;
        $$('html')[0].on('click', function () {
            element.show();
            element.update(text_area.value);
            text_area.hide();
        });
    });
});

Answer 1

找到了一个解决方案，但我仍然愿意接受更优雅的解决方案;）

这里是新的小提琴：http://jsfiddle.net/t3qRL/2/

更新了javascript：

document.observe('dom:loaded', function () {
    $$('body')[0].on('click', '.txt_area', function (event, element) {
        event.stopPropagation();        
        var div_text = element.innerHTML;
        element.hide();
        var text_area = element.next('textarea');
        text_area.show();
        text_area.value = div_text;
        text_area.onmouseover = function () {
            text_area.observe('click', function(event) {
                Event.stop(event);
            });
        }

        text_area.onmouseout = function () {                
            $$('html')[0].on('click', function () {
                console.log(text_area.value);
                element.show();
                element.update(text_area.value);
                text_area.hide();
            });
        }
    });
});

Answer 2

document.on('click', function(evt, elm){
  if(elm.match('.txt_area')){
    // do your textarea magick here
  }else{
    // cancel the textarea etc. if it's open
  }
});

这应该让你看起来不那么折磨了。

如何检测原型中当前textarea之外的点击？

2 个答案: