javascript - 锚标记 IE 11 问题内的文本区域

Question

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

下面的代码在 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>

标签： javascripthtmlcss

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>

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