javascript - anchor 标签内的文本区域 IE 11 问题

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>

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