score:1
i just had to roughly do this for you. next time you must provide snippet for other respectful developers to work with.
the idea here is not to put your chips inside your input. input is not a container so putting elements inside of it isn't ideal. create a wrapper <div>
or any container that can container your chips and your input. and then style it like an input, usually putting a border would do.
var input = document.queryselector(".chip-input");
var chips = document.queryselector(".chips");
document.queryselector(".form-field")
.addeventlistener('click',() => {
input.style.display = 'block';
input.focus();
});
input.addeventlistener('blur',()=>{
input.style.display = 'none';
});
input.addeventlistener('keypress', function(event){
if(event.which === 13)
{
chips.appendchild(function ()
{
var _chip = document.createelement('div');
_chip.classlist.add('chip');
_chip.addeventlistener('click', chipclickhandler);
_chip.append(
(function ()
{
var _chip_text = document.createelement('span');
_chip_text.classlist.add('chip--text');
_chip_text.innerhtml = input.value;
return _chip_text;
})(),
(function ()
{
var _chip_button = document.createelement('span');
_chip_button.classlist.add('chip--button');
_chip_button.innerhtml = 'x';
return _chip_button;
})()
);
return _chip;
}());
input.value = '';
}
});
function chipclickhandler(event){
chips.removechild(event.currenttarget);
}
.form-field{
width: 400px;
height: auto;
min-height: 34px;
border: 2px solid #737679;
padding: 8px;
margin: 8px;
cursor: text;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(25,25,25,0.2);
}
.form-field .chips .chip {
display: inline-block;
width: auto;
background-color: #0077b5;
color: #fff;
border-radius: 3px;
margin: 2px;
overflow: hidden;
}
.form-field .chips .chip{
float: left;
}
.form-field .chips .chip .chip--button {
padding: 8px;
cursor: pointer;
background-color: #004471;
display: inline-block;
}
.form-field .chips .chip .chip--text {
padding: 8px;
cursor: no;
display: inline-block;
pointer-events: none
}
.form-field > input{
padding: 15px;
display: block;
box-sizing: border-box;
width: 100%;
height: 34px;
border: none;
margin: 5px 0 0;
display: inline-block;
background-color: transparent;
}
<div class="form-field">
<div class="chips">
</div>
<input placeholder="enter something here" autofocus autocomplete="off" class="chip-input" />
</div>
<p><strong>just type in your text and press enter. bingooo! it works.</strong></p>
score:2
for things like this, i usually hide the input, and make a label around the whole thing for
the input's id, and style that to look like the actual input.
<label for="chips-input" class="chips">
<span>chip x</span>
<span>chip x</span>
<span>chip x</span>
<span>chip x</span>
<input type="text" id="chips-input">
</label>
.chips{
border: 1px solid #ccc;
border-radius: 2px;
padding: 10px;
margin: 20px;
display: block;
width: 400px;
max-width: 100%;
input{
border: none;
appearance: none;
}
}
https://codepen.io/eightarmshq/pen/lypzyde
if only there was a way you could find one of these online... ;p
Source: stackoverflow.com
Related Query
- How to get the chips inside the input box?
- How to get the input box value not the selected li tag on autocomplete by material ui?
- ReactJS: How To Get Input Value From The Prompt Box And Update It To Database
- How to get the value of an input field using ReactJS?
- How to get something from the state / store inside a redux-saga function?
- How to get the ReactJS element inside componentDidMount()?
- MaterialUI how to align text inside an Input to the right or center?
- How to get the values from a Multiple Search Selection dropdown box in react-semantic-ui?
- How to get value from useState inside the function
- How to get the length of the text inside the React component
- How to change the height of MUI Datepicker input box in React
- (ReactJS) How do you get the input value of an input of type date?
- How to get the ref of a child component inside parent component in ReactJS
- How do I pass the text data from firestore inside the expandable row and get the document ID to be passed inside the setState?
- How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
- How to make content scrollable inside a flex box without given the height?
- How to add the input field inside the select option using ant design and react
- How to get the block unique ID inside edit and save functions on registerBlockType
- how to get the id of element inside render and pass it to a function
- How to get the value of the date input in ReactJS?
- How can i get access to the current user inside of react from firebase?
- How does react know where to put the cursor while typing inside an input element?
- How to get the state updated of input field of google map api in React app
- How to show a certain value inside the input tag in reactjs?
- How do I get the actual file from an Input type file element?
- How to get the Ref of input after a click
- How do I get the return type of a function to be the input of another function in the same interface
- How to get the current state inside socket.io on callback function
- ReactJS: How to get response array inside State(useState) and check the length of the array when rendering/binding
- How to get the values for dynamically generated input field in react js?
More Query from same tag
- How to show <Skeleton.Image /> only in loading component (Ant Design)
- Can I use a template literal inside a JSX tag?
- Having transparent background behind React-bootstrap Modal window
- How would I use React-Bootstrap in a Hyperstack component?
- compilerOptions.paths must not be set (alias imports are not supported)
- Hover style '&:hover:{ }' doesn't work for the button within react component
- parsing failed SyntaxError: Unexpected end of input
- How to get the ref from a Mobiscroll child component into the parent
- How to groud data array from backend by date Month
- How to Access Data in Redux Store?
- Cannot install react-export-excel using npm in reactjs
- Remove duplicate JSX elements | React Strapi graphql
- TypeScript & React: compose higher-order components
- Typescript and React: Failing type inference when using React.Component and conditional typed props
- testing a function in jest javascript
- How to pass variables from class to class
- React Event Handling For Each Icon
- Not able to set the state properly in react
- Using Object.keys(), map(), ...Array(), reduce() and concat() in a single const
- check if element still has mouseenter after delay
- Updating nested useState seems to modify the original data
- react js: install downloaded apk
- How to get jwt token from url in react using react-router-dom v6
- What element can I use to wrap a Typography component so that it accepts an onClick event listener without using button
- React Duplicate Key Error
- How to declare defaultProps for the nested object?
- SVG <textPath> not showing up (with ReactJS)
- How to re-render child component in react spfx?
- How to fixed the table header?
- react router version 4 not showing anything