Блог

Главная - Вопросы по программированию - как по щелчку сфокусировать текстовую область с помощью чипов ввода Vue CSS

как по щелчку сфокусировать текстовую область с помощью чипов ввода Vue CSS

#css

#css

Вопрос:

Я хочу иметь onclick focus для всей области (чип-контейнер), и в настоящее время я фокусируюсь на классе chip-container, но у меня нет никаких изменений при нажатии на текст. Я думаю, поскольку у меня также есть ввод, это отличие от контейнера для чипов, я хотел бы иметь контейнер для чипов в качестве текстовой области, но я не могу просто использовать атрибут textarea, потому что это не повлияет на поведение моих чипов.

Мой вопрос в том, как я могу присвоить надлежащий класс чиповому контейнеру, входному или другому элементу, чтобы я мог сфокусировать всю область одним щелчком мыши.

Вот код для шаблона

 <div class="chip-container">
      <div class="chip" v-for="(chip, i) of chips" :key="chip.label">
        {{chip}}
        <i class="material-icons" @click="deleteChip(i)">clear</i>
      </div>
      <input v-model="currentInput" @keypress.enter="saveChip" @keydown.delete="backspaceDelete">
    </div>

Вот CSS

 .chip-container {
  width: 400px;
  height: 167px;
  border: 1px solid #ccc;
  min-height: 34px;
  display:flex;
  flex-wrap: wrap;
  align-content: space-between;
  .chip {
    margin:4px;
    background: #e0e0e0;
    padding:0px 4px;
    border: 1px solid #ccc
    border-radius: 3px;
    display:flex;
    align-items: center;
    i {
      cursor: pointer;
      opacity: .56;
      margin-left:8px;
    }
  }
  input {
    flex: 1 1 auto;
    width:30px;
    border: none;
    outline: none;
    padding:4px;
amp;:focus {
    border-color: bule;
    box-shadow: 0 0 3px 2px blue, 0.5;
    outline: 0;
  }
  }
}

вот живой код:https://codepen.io/lydchair/pen/ExKLqpK

весь контейнер должен иметь возможность фокусироваться при щелчке, а не только область ввода, должно быть такпрежде чем создавать текстовый чип

введите описание изображения здесь

оба рисунка отображаются в одной и той же области, непосредственно перед и после того, как текст становится чипом

Ответ №1:

Проверьте этот код, это может помочь вам решить вашу проблему. Чтобы сфокусироваться на поле ввода, вы можете использовать:псевдокласс focus. Псевдокласс CSS :focus представляет элемент (например, форму ввода), который получил фокус. Обычно это срабатывает, когда пользователь нажимает на элемент или выбирает его с помощью клавиши Tab на клавиатуре. Подробнее о псевдоклассах см. по этой ссылке.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .chip-container {
            display:flex;
            flex-wrap: wrap;
            align-content: space-between;
            width: 300px;
        }
        input{
            width: 100%;
            transition-duration: 500ms;
        }
        input:focus{
            transition-duration: 500ms;
            background-color: #d1d9e0;
        }
    </style>
</head>
<body>
<div class="chip-container">
    <label for="in">Chips</label>
    <input id="in"></input>
</div>

<script>

</script>
</body>
</html>

Комментарии:

1. ПРИВЕТ, я понимаю, как сфокусировать область ввода, это не совсем моя проблема, моя проблема в том, что я хочу сфокусировать весь чип-контейнер, так как на втором рисунке область также показывает чипы, так что это не просто ввод