Alter the appearance of a webpage by pressing a key. (Using Vue.js)

Is there a way to change the CSS style value of an element when a specific keybind is pressed by the user?

<textarea id="check"
    v-model="text"
    v-on:keydown.ctrl.up="decreaseFont"
 >

I am able to confirm that the decreaseFont function is being called, but the font-size value is not changing as expected.

decreaseFont() {
      console.log("check")
      document.getElementById("check").style.fontSize--;
    }

Below is my CSS code snippet:

div textarea {
  position: relative;
  font-size: $fontSize;
  color: white;
  height: 100vh;
  width: 100%;
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  resize: none;
  font-family: "Courier New", Courier, monospace;
}

In addition, I am trying to make the textview cover the entire screen without displaying a scrollbar. Even after setting the height to 100vh, the scrollbar still appears.

I have also set the margin and padding of the body element to 0 in order to troubleshoot this issue.

https://i.sstatic.net/qMbM4.png

javascriptcssvue.js

Answer №1

Utilizing the getComputedStyle() method

var application = new Vue({
  el: '#application',
  data: {
    content: '',
    size: null
  },
  methods: {
    decreaseTextSize() {
      this.size--;
    }
  },
  created: function () {
    var element = document.getElementById('verify');
    var styleProperty = window.getComputedStyle(element, null).getPropertyValue('font-size');
    this.size = parseFloat(styleProperty);
  }
})
div textarea {
  position: relative;
  font-size: 16px;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  resize: none;
  font-family: "Courier New", Courier, monospace;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="application">
  <textarea 
    id="verify" 
    v-model="content" 
    v-on:keydown.ctrl.up="decreaseTextSize" 
    :style="{'font-size': size + 'px'}">
  </textarea>
</div>

Answer №2

Check out this code snippet:

<template>
  <div>
    <textarea
      id="check"
      v-model="text"
      v-on:keydown.enter="decrease = decrease-1"
      :style="{'font-size': decrease+'px'}"
    />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      text: null,
      decrease: 30
    };
  }
};
</script>

<style>
body {
  margin: 0;
}
</style>

<style scoped>
div textarea {
  position: relative;
  color: black;
  height: 99vh;
  width: 100%;
  outline: none;
  border: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  resize: none;
  font-family: "Courier New", Courier, monospace;
}

If you're interested in seeing it in action, I have set up a CodeSandbox for demonstration purposes.

Take note that the font size changes when the enter key is pressed for illustrative purposes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Vue the proper method to ensure the vuex store is accessible to a dynamically generated component

I have a .vue component called Sectors, that I need to dynamically add to a container named "desktop_sectors" on desktop, or "mobile" on mobile devices. <v-flex sm12 md12 ma-2 ref="desktop_sectors"> v-flex sm12 ma-2 ref="mobile"> To avoid crea ...

vue.jsvuexvuetify.js

Using Phonegap alongside ons-scroller and ons-button

Recently, I have been using Phonegap with the Onsen UI system on iOS devices. I encountered an issue where buttons included within an ons-scroller were not clickable when running on an iPad or iPhone. Here is the code snippet that caused the problem: < ...

javascriptioscsscordovaonsen-ui

Disabling JavaScript for a particular page using Selenium:

My current challenge involves navigating to a webpage, locating a link to another page within it, and proceeding to that link without using javascript. One approach I've considered involves the following method: options = Options() options.add_exper ...

javascriptpython-3.xseleniumgoogle-chromeselenium-chromedriver

How can I locate the following table after choosing an element using a jQuery selector?

I'm looking for a selector that can start at the element I click on and locate the next item with a specific class on the page. Here's an example to illustrate my request: <table> <tr> <td>Some text here</td> <td>&l ...

javascriptjqueryjquery-selectors

Guide to displaying a template using Vue.js

Incorporating jQuery and vuejs version 2.3.4: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js The code snippet below demonstrates my current setup: // Instantiating Vue. vueVar = new Vue({ el: '#content', ...

jqueryhtmlvue.js

Animation effects compatible with iOS devices are professionally crafted using CSS

I just implemented a custom hamburger menu with animation using HTML, CSS, and JavaScript on my website. The animation works perfectly on Android devices but not on iOS. Any suggestions for fixing this issue? I attempted to add the Webkit prefix to each p ...

javascripthtmlcssanimationcss-animations

variety of provider setups available in Angular

Trying to learn Angular from various online sources can be quite confusing, as different people use different patterns when writing functions. Can someone please explain the .provider concept in Angular? I have experimented with the .provider method using ...

javascriptangularjsangular-providers

"Sending the selected pass selector as a parameter to the dispatched action is causing a typing

When a selector changes its value, I want to trigger an action. To achieve this, I passed the selector with a subscription instead of passing an observable. selectedSchedulingsOnPopup$ = this.store.pipe(select(selectSchedulingsByBranch)); this.store.disp ...

javascriptangularreduxrxjsngrx

Sections overlap, extending the content beyond their designated boundaries

I am facing an issue where the header in the first section remains fixed as an attachment, but when I resize the browser window, the background only covers a small portion of the section. The rest of the content either goes under another section or complet ...

htmlcssviewpositioningclearfix

Using javascript to transform the entire list item into a clickable link

Currently, I am using PHP in WordPress CMS to populate slides on a slider. Each slide contains a link at the bottom, and my goal is to target each slide (li) so that when clicked anywhere inside it, the user is directed to the URL specified within that par ...

javascriptphpjqueryhtmlcss

Two Ajax Requests Simultaneously

I am currently faced with the challenge of handling two requests simultaneously. The first request involves executing a lengthy PHP script that takes 10 minutes to complete (I cannot modify it using JavaScript, so that's not an option). The second ...

javascriptphpjqueryhtmlajax

display a dialogue box when clicked, containing radio buttons

I am currently developing a practice exam for students at my school. The exam consists of multiple choice questions, and I have hit a roadblock in the coding process. Being new to javascript, I am struggling to figure out how to make it function properly. ...

javascriptjqueryhtml

Using vue.js to pass route parameters to a component

I'm encountering an issue with passing a route param directly into a component. Despite following various sets of instructions from the documentation (including using the Composition API as shown in the code snippet below), I continue to receive undef ...

javascriptvue.jsvue-router

Implications of using literals, objects, or classes as arguments in functions that are called multiple times can have

Context A project I'm working on involves a scenario where a Shape class is triggering a function call SetPosition( x, y ) on a Drawer class. As part of this process, the Drawer class needs to retain the values (x, y) passed through SetPosition. The ...

javascriptmemory

Sharing information between pages in React through Router

I am struggling to transfer a single string from one page to another using react router and only functional components. I have created a button that links my pages, but I can't seem to pass the string successfully. Here is an example of the code on th ...

javascriptreactjsreact-nativereact-router

NodeJS produces identical outcomes for distinct requests

RESOLVED THANKS TO @Patrick Evans I am currently working on a personal web project and could use some assistance. In my website, users are prompted to upload a photo of their face. When the user clicks the "upload" button, the photo is sent with a request ...

javascriptnode.jsapiexpressunirest

The callback function for the XMLHttpRequest object is not triggered when making a cross-domain request using jQuery/Ajax

Looking for some help with this code snippet I have: $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentCo ...

javascriptjqueryajaxxmlhttprequest

The placement of the Vuetify tooltip is incorrectly aligned when located in the footer section

Having trouble fixing the issue with the Vuetify tooltip. After scrolling on the page, the tooltip moves up despite using fixed="true". Here is the code snippet causing the problem: <v-footer app inset fixed> <v-row align="center ...

javascriptvue.jsvuetify.js

Mastering the art of simultaneously running multiple animations

Utilizing two functions to apply a Fade In/Fade Out effect on an element. Confident in the functionality of both functions, as testing them sequentially in the Console proves their effectiveness. However, executing: fadeIn() fadeOut() seems to result in ...

javascript

Create an Android application using Node.js

While developing my mobile application, I am utilizing html5 with node.js to create a chat box for users connected on the same wireless network. However, I encounter an issue when coding on my desktop using node.js software. How can I overcome this challen ...

javascriptandroidjquerynode.jsapk