锚定标签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标签

添加文本区域和保存按钮，以便用户可以输入评论并保存该项目。-我们需要将这些元素放置在链接中，但{{1 }}标签为互动内容，不是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;
}

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