Twitter clone - Post component
Requirement:
It is possible to set the upper limit of words in the Search box, If the upper limit is exceeded, the Submit button cannot be clicked, and the background of the text that exceeds the upper limit will be displayed The color is shown in red.
For example, the upper limit of the text is 3. When the user enters ABCD, only the background of D will be dyed red at this time
how twitter make it?
6 Replies
the beauty of the web is that you can pretty much always just peek at the source code and see how stuff is done, especially with HTML and CSS
When I type garbage into the tweet field:
then look at the inspector:
you can see that the red part of the text has been put into its own span, and that span has an inline background-color
what looks like a textarea is just a div with contenteditable="true":
so likely, on keydown/press/up or whatever, they see what key has been pressed, then replace the contents of the div and set the cursor back where it was
very good insight...