-1

I have created textarea in my webpage and i also created two buttons (h1) "font-size:40px"and (h4) "font-size:20px" to set the font-size according to selected size in the textarea, when we click the button the font-size of the whole text in textarea changes. But what i mean to do is once if i set the text to 'h1' by clicking the button and again if i want to change the text to 'h4' then previous text should be remain unchanged of size 'h1'(40px) and next what we type after clicking the button 'h4' should be of the size '20px'.

What I mean is, I want the following size of text to be in my textarea box with different size of 40px and 20px

THIS IS TEXT OF SIZE 40PX

THI IS TEXT OF SIZE 20PX

How this is achieved? By using plain javascript or jquery.

varun teja-M.V.T
  • 104
  • 1
  • 10
  • I have read the content in the link , but I don't want to use any of the other html page in my html page. I want to code by myself . Can any of them suggest how this can be achieved. – varun teja-M.V.T Mar 14 '18 at 16:24

1 Answers1

0

This code will check the value of your input and changes the font of the text-area according to the input field.

$(document).ready(function() {
    $("#your_input_id").keyup(function() {
        if (this.value == "h1") {
            $("textarea").css("font-size", "40px");
        }
        else if (this.value == "h4"){
            $("textarea").css("font-size", "20px");
        }
    });
});
Web R
  • 565
  • 1
  • 6
  • 23
  • That will change the **whole** textarea **by default**. The question is asking how to style *different parts* differently and *on-demand* based on user input. – Quentin Mar 14 '18 at 16:10
  • @Quentin Then just check the user input on the jquery/ javascript code, then set the css to what I mentioned above. – Web R Mar 14 '18 at 16:12
  • That's what the OP is doing already and it will still change the **whole** textarea, the question is asking how to style different parts differently. – Quentin Mar 14 '18 at 16:12
  • Yes, what Quentin said is right – varun teja-M.V.T Mar 14 '18 at 16:14
  • I updated my answer. – Web R Mar 14 '18 at 16:17
  • 1
    Your edit is still showing how to style **the whole textarea the same way** (and now it is doing it on key up based on what text is typed when the question is asking about using different buttons). The question wants to have *some words at 20px and some words at 40px in the same textarea element at the same time*. (You should consider deleting this attempt at an answer and reading the ones on the duplicate question instead) – Quentin Mar 14 '18 at 16:19