锚标签IE 11问题内的Textarea

Question

我有一个项目列表，当您单击该列表时，它将转到该项目的详细信息页面。 但是我也想添加一个文本区域和一个保存按钮，以便用户可以输入评论并保存该项目。 像这样的东西：

下面的代码在chrome / FF中可以正常工作，但是在IE11中，您必须双击才能在文本区域中键入内容，而且光标将始终位于现有文本的开头而不是结尾。

任何想法为什么以及如何解决它？

 function handleClick(e){ console.log(e.target) // e.stopPropagation(); e.preventDefault(); } 

 .list-item { width: 250px; height: 80px; display: block; border: 1px solid black; } 

 <a href="http://google.com" class="list-item" > <button onclick="handleClick(event);"> hello 1</button> <textarea cols="30" rows="3" onclick="handleClick(event);" draggable="false"></textarea> </a> 

Answer 1

让我们分解您的要求，并找到最适合工作的标签

我有一个项目列表 -所以让我们选择最好的列表元素，可能是ul

单击后，将转到项目的详细信息页面。 - a标签

添加文本区域和保存按钮，以便用户可以输入评论并保存该项目。 -我们需要在链接到这些位置，但不必在元素a标签作为交互式内容是不是一个合法的孩子a标签。

 .list { /*Remove default list padding*/ padding:0; } .list-item { width: 400px; height: 80px; display: block; border: 1px solid black; background-color: orange; margin: 5px; /*Make the list item the basis for positioning */ position: relative; } .list-item-link{ /*Place the link relative to the list item*/ position:absolute; display:block; padding:5px; /*Cover the list item area*/ top:0; bottom: 0; left:0; right:0; z-index: 1; } .list-item-note, .list-item-save { /*Set commom attributes for notes and link*/ position:absolute; z-index:10; bottom: 5px; } /*Position elements as required*/ .list-item-save { right: 5px; } .list-item-note { right: 55px; width: 200px; } 

 <ul class="list"> <li class="list-item"> <a href="http://google.com" class="list-item-link">Your Image<br>Here</a> <button class="list-item-save">Save</button> <textarea rows="3" draggable="false" class="list-item-note" placeholder="Notes"></textarea> </li> <li class="list-item" class="list-item-link"> <a href="http://google.com" class="list-item-link">Your Image<br>Here</a> <button class="list-item-save">Save</button> <textarea rows="3" draggable="false" class="list-item-note" placeholder="Notes"></textarea> </li> </ul> 

根据需要调整位置和尺寸。