Question

我有一个box元素（实际上是一个<ol>，有一些<li> s），我想在它上面创建一个textarea，所以列表是可编辑的。

翻译函数（items-＆gt; text;然后解析text-＆gt;项目）已经完成（对于第二部分，所有<li>都将被删除并从文本中重新创建）。

但我不知道如何将此textarea定位为完全在列表中。

修改

以下是一些代码：

<h2>TODO List</h2>
<div id="container">
    <ol id="theol" style="margin-left: 10px; padding-left: 15px; width: 270px; border: 1px solid Gray;">
        <li><span>Locate the ol element</span></li>
        <li><span>Add the text input after it</span></li>
        <li><span>Change text input style to position it over the &lt;ol&gt;</span></li>
        <li><span>Capture ENTER or ESC (maybe blur() too)</span></li>
        <li><span>If ESC then just abandon everything</span></li>
        <li><span>If ENTER (or blur()) then clear all the &lt;li&gt; and recreate them</span></li>
        <li><span>Get rid of input</span></li>
    </ol>
</div>

<script src="http://cdn.jsdelivr.net/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<!-- injected script -->
<script type="text/javascript">
    var theol = $('ol#theol');
    var newlist = $('<textarea/>').insertAfter(theol);
    // how to position 'newlist' exactly over 'theol'?
</script>

诀窍是：脚本被注入（通过书签），我无法控制预先存在的数据。此外，风格可能不像上面那样是静态的（边距，填充，宽度）。我还不知道，但我认为它的高度是可变的（适应内容）。

Answer 1

使用像：

这样的包含元素

<div class="containingelement">
   <ul>
   </ul>
   <textarea></textarea>
</div>

并设置位置和z索引，如：

.containingelement{
   position:relative;
   z-index:1;
}

.containingelement textarea{
   position: absolute;
   z-index: 1;
   top:0;
   left:0;
}

并确保宽度和高度匹配

将动态文本区域精确定位在现有的box元素上

1 个答案: