Edit input field on :focus

I want to create a input form that will have a width adjusted to the amount of text in it like in the picture

48 Replies

I think that you will need to use JavaScript to observe the key input and adjust the width of the input according to the number of characters.

vince•16mo ago

I don't really see why you'd want to do this in the first place If you're expecting the user to type a lot in an input field I would use the textarea element and that should give the user a lot of room to type

artus•16mo ago

no its just a title, full description and other stuff will be avaiable when user hover on it ar click

vince•16mo ago

What other information will be available when the user hovers or clicks? Doesn't sound like great UX unless it's decorative

artus•16mo ago

basic stuff like who added this, when and description is it good or i should change my idea

vince•16mo ago

I'm not really sure the full context. Your picture shows cards but you're asking about input fields? Are the input fields inside your cards? Or are the cards the input fields themselves

artus•16mo ago

            <div class="section color-testing">
                <div class="section-title"><h1 class="title"> TESTING </h1></div>
                <div class="cards">
                    <div class="item">
                        <div class="card-title"> Card1 Test </div>
                        <div class="hiden-card-info">
                            <h4> Info </h4>
                            <p> Added: 07.06.2023 </p>
                            <p> Author: Jack </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="card-title"> Card2 </div>
                        <div class="hiden-card-info"> clean your teeth </div>
                    </div>
                </div>
            </div>

            <div class="section color-testing">
                <div class="section-title"><h1 class="title"> TESTING </h1></div>
                <div class="cards">
                    <div class="item">
                        <div class="card-title"> Card1 Test </div>
                        <div class="hiden-card-info">
                            <h4> Info </h4>
                            <p> Added: 07.06.2023 </p>
                            <p> Author: Jack </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="card-title"> Card2 </div>
                        <div class="hiden-card-info"> clean your teeth </div>
                    </div>
                </div>
            </div>

and input is only when user click on title to change it

vince•16mo ago

But why do you want to hide the information until the user clicks or hovers? Oh I think I see what you mean Okay Yea I'm not really sure about this, I've never really seen anything like this. Usually if a website allows a user to edit certain content they'll either have a modal or bring them to another page to allow editing. I'd recommend either of those 2 If you're just doing this for a project to learn that's fine but if you're hoping for other users to use it I'd try to research some ways editing content are typically implemented

artus•16mo ago

its for myself, I was curious if thats even possible

vince•16mo ago

Yea for sure, pretty much anything is possible in js. I can make a codepen rq

artus•16mo ago

maybe it is, but I won't bother with that right now is there any way to make a input 100% of item width?

vince•16mo ago

yup So you want it so that when the user types in things it will keep expanding the width? Or do you want something like a textbox

artus•16mo ago

artus•16mo ago

just to make it bigger

vince•16mo ago

How big? To fill the container it's in?

Gaming

Programming

Edit input field on :focus