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