Ad

Changing Font Size Using Keyboard And Mouse

- 1 answer

I'm trying to change font size by pressing certain things. For example:

  1. 'Alt' and '+'
  2. Esc

Im having problems when it comes to Esc button. I know Esc button keyCode is 27 but it seems it's not working. I even try to use onkeyup but that didn't help either. Basically when i press Esc button it should return text to starting position which is 30pt. I'd appreciate any answer to how i can solve this problem.

<html>
<head>
<style>p{font-size: 30pt;}</style>
</head>
<body onmousedown="changeSize(event)" onkeyup="changeSize(event)">
     <p>Text1</p>
     <p>Text2</p>
     <p>Text3</p>
</body>

<script>
    var start = 30;
    var min = 10;
    var max = 50;
    function changeSize(e) {
    var b = e.keyCode;
    var c = e.button; 
    var fontSized = document.getElementsByTagName("p");
    if (e.altKey){
            if (b == 107){
                if (start <=max && start >=min){
                start += 5;
                    for (i=0; i<=fontSized.length; i++){
                        fontSized[i].style.fontSize = start + "pt";
                    };  
                } 
            }
        }
    if (b == 27){
        start = 30;
        for (i=0; i<=fontSized.length; i++){
            fontSized[i].style.fontSize = start + "pt";
        };  
    }
    }
</script>
</html>
Ad

Answer

Your if (b == 27) { is inside the if (e.altKey) { block so it will only work if alt is also pressed. Your code should look like this:

if (e.altKey){
    if (b == 107){
        if (start <=max && start >=min){
            start += 5;
            for (i=0; i<=fontSized.length; i++){
                fontSized[i].style.fontSize = start + "pt";
            };  
        } 
    }
}
if (b == 27){
    start = 30; // start == 30 is a comparator, and does not set start to 30
    for (i=0; i<=fontSized.length; i++){
        fontSized[i].style.fontSize = start + "pt";
    };  
}

Note that start == 30 after if (b == 27) has been changed to start = 30

EDIT: After trying out your code, everything seems to work correctly, but to increase the font size you have to do Alt + '+' (on the Numeric Keypad!). You might want to consider doing Alt + Shift + '=' or just Alt + '='

For reference, here is my code:

<html>
<head>
<style>p{font-size: 30pt;}</style>
</head>
<body onmousedown="changeSize(event)" onkeyup="changeSize(event)">
     <p>Text1</p>
     <p>Text2</p>
     <p>Text3</p>
</body>

<script>
    var start = 30;
    var min = 10;
    var max = 50;
    function changeSize(e) {
    var b = e.keyCode;
    var c = e.button; 
    var fontSized = document.getElementsByTagName("p");
    if (e.altKey) {
        if (b == 187){ // Now the combination is Alt + '='
            if (start <=max && start >=min){
                start += 5;
                    for (i=0; i<=fontSized.length; i++){
                        fontSized[i].style.fontSize = start + "pt";
                    };  
            } 
        }
    }
    if (b == 27){
            start = 30;
            for (i=0; i<=fontSized.length; i++){
                fontSized[i].style.fontSize = start + "pt";
            };  
        }
    }
</script>
</html>
Ad
source: stackoverflow.com
Ad