JS+HTML实现水果多选导入textarea及复制功能问题求助

各问题对应解决方法 #

• 问题1：选中的水果无法全部显示
  原代码在循环写入textarea时每次直接覆盖内容，且取消选中水果时没有把对应项从选中数组移除。修复后改为拼接完整内容再写入，同时优化选中逻辑，取消选中时同步删除数组内对应项。
• 问题2：复制后出现黑色边框
  是textarea聚焦后的默认outline样式，新增:focus样式去掉outline即可。
• 问题3：禁止编辑但保留复制功能
  不要用disabled属性，给textarea加readonly属性即可，只读状态下无法编辑但可以正常选中复制。
• 问题4：复制到Word字体颜色变黑色
  textarea内容是纯文本，默认复制不带样式。如果需要带颜色粘贴到Word，需要用Clipboard API向剪贴板写入带样式的富文本内容，纯文本复制无法保留样式。
• 问题5：复制保留缩进格式
  生成textarea内容时统一给每个水果名称前加2个空格，用\n换行，纯文本本身会携带缩进信息，复制后自然保留格式。

修改后完整代码 #

HTML #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="create_notbox_container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" readonly></textarea>
        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>
    <script src="script.js"></script>
  </body>
</html>

CSS #

在原有CSS基础上修改#noteList部分，新增聚焦样式：

#noteList
{
  resize: none;
  font-size: 15px;
  font: serif;
  color: #28B463;
  text-align: left; /* 要缩进的话左对齐更合理，不需要可删除此行 */
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;
}
#noteList:focus {
  outline: none;
}

JavaScript #

let fruits = [
  {id: 0, name: 'Apple'},
  {id: 1, name: 'Orange'},
  {id: 2, name: 'Banana'},
  {id: 3, name: 'Strawberry'}
]

let add_to_note_box = []
let list = document.querySelector('#list')
let noteList = document.querySelector('#noteList')
let createTextBoxBtn = document.querySelector('.create-text-box')
let copyTextBtn = document.querySelector('.copy-text')

function addItems(){
  let fruitItem = ''
  let position = 'beforeend'
  for(let fruit of fruits){
    fruitItem = `<li id='${fruit.id}' class="item">
        <p id="${fruit.id}" class="fruits">${fruit.name}</p>
    </li>`
    list.insertAdjacentHTML(position, fruitItem)
  }
}

list.addEventListener('click', (event)=>{
  if(event.target.classList.contains('fruits')){
    const fruitId = event.target.id
    const fruitName = fruits[fruitId].name
    const existIndex = add_to_note_box.indexOf(fruitName)
    if(existIndex > -1){
      // 取消选中
      add_to_note_box.splice(existIndex, 1)
      event.target.style.backgroundColor = null
    }else{
      // 新增选中
      add_to_note_box.push(fruitName)
      event.target.style.backgroundColor = '#3498DB'
    }
  }
})

createTextBoxBtn.addEventListener('click', ()=>{
  if(add_to_note_box.length === 0){
    alert('Nothing to add to the notebox')
  }else{
    let items = 'Fruits\n'
    for(let text of add_to_note_box){
      items += `  ${text}\n`
    }
    noteList.textContent = items
    add_to_note_box = []
    // 清空选中样式
    document.querySelectorAll('.fruits').forEach(el => el.style.backgroundColor = null)
  }
})

copyTextBtn.addEventListener('click', ()=>{
  if(!noteList.textContent){
    alert('There is nothing to copy')
  }else{
    noteList.select()
    document.execCommand('copy');
    copyTextBtn.textContent = "Copied!"
    setTimeout(()=>{
    copyTextBtn.textContent = 'Copy Text'
  }, 2000)
  }
})

addItems()

内容的提问来源于stack exchange，提问作者night_programmer