I am looking to create a textarea where people can select different fonts, such as "sans-serif" and "serif", to type in text. I plan to have buttons labeled "sans-serif" and "serif" that will change the font of the textarea when clicked.
However, there are some conditions:
The total line limit of the textarea cannot exceed 4 lines.
Each line cannot be more than 100px wide in terms of characters inputted by the user.
If a line exceeds 100px, it should automatically move to the next line.
Once the user reaches line 5, they should no longer be able to input text.
I believe using HTML5 canvas with JavaScript/jQuery would be ideal. However, I need a function to change the font of the textarea. Do you have any suggestions for this?
Here is the HTML and CSS setup:
HTML:
<textarea id="testarea"></textarea>
<br>
<div class="btn" onclick="$('#testarea').css('font-family', 'sans-serif');">Sans-serif</div>
<div class="btn" onclick="$('#testarea').css('font-family', 'serif');">Serif</div>
CSS:
#testarea{
resize: none;
width: 300px;
height: 232px;
font-size: 16px;
line-height: 1.45;
}
.btn{
cursor: pointer;
display: inline-block;
background: green;
padding: 10px;
}