Display a span when the input is in focus

In my form, I have two text fields that are linked to <span> elements to display the total number of characters inputted.

I have implemented a condition using ng-if.

However, I want to display the remaining characters text only when the respective textarea is in a focused state.

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

<textarea ng-model="goal.goal_name"
 required ng-focus="openFullcreateGoalController()" maxlength="90" placeholder="Write your title here"></textarea>
 <span ng-if="goal.goal_name && !goal.goal_description">{{90 - goal.goal_name.length}}characters left</span>

  <textarea msd-elastic ng-model="goal.goal_description" required placeholder="Add description" maxlength="140"></textarea>
   <span ng-if="goal.goal_description">{{90 - goal.goal_description.length}}characters left</span>

My code currently only displays the remaining characters if the other field is empty.

javascriptangularjsangularjs-directive

Answer №1

To style your form fields when they are focused, you can utilize the CSS :focus selector

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.goal = {
    goal_name: 'goal_name',
    goal_description: 'goal_description'
  };
})
textarea.charleft + span {
  display: none;
}
textarea.charleft:focus + span {
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <textarea ng-model="goal.goal_name" class="charleft" required maxlength="90" placeholder="Write your title here"></textarea>
    <span ng-if="goal.goal_name">{{90 - goal.goal_name.length}}characters left</span>

    <textarea msd-elastic class="charleft" ng-model="goal.goal_description" required placeholder="Add description" maxlength="140"></textarea>
    <span ng-if="goal.goal_description">{{90 - goal.goal_description.length}}characters left</span>
  </div>
</div>

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

Encountered a syntax hiccup in my PHP and JavaScript codes

Below is my PHP code snippet: echo ("<td><img src='edit.jpg' width='20' alt='Edit' title='EDIT DATA' onClick=\"swipe2('" + . mysql_result($result, $i, 'no'). + '');'style= ...

javascriptphp

Encountering an unexpected error: receiving a void element tag as input in React

Any ideas on how to resolve the following error message: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` Check out my code snippet below: import "./styles.css"; export default function App() { re ...

javascriptreactjs

Validate selected checkbox using JavaScript

Is there a way for me to achieve real-time updates when checking and unchecking multiple checkboxes in a list? Here's the code snippet I currently have: window.onload = function () { var input = document.getElementById('listTaxi'); fu ...

javascriptjquerycheckbox

Switch between two functions by clicking a button

Presented here is a button that serves as a toggle switch: <button ng-click="togglefunction()">Toggle Data</button> Below is the toggle functionality: $scope.toggleToolPanel = function () { // The goal is to include the following 2 ...

javascriptangularjstoggleangularjs-ng-click

"Step-by-step guide on populating a select box with data from the scope

Hey everyone, I'm new to using Angular and hoping for some help with a simple question. I've created a form (simplified version below) that I want users to see a live preview as they fill it out. Everything was going smoothly with regular field ...

javascriptangularjs

"Ensure that all necessary fonts and assets are included in the development of your Vue component

At the moment, I am utilizing vue-cli-service build --target lib --name myLib [entry] to compile Vue into a component library for integration into other projects. Nevertheless, it only produces four files which are: dist/myLib.umd.min.js dist/myLib.umd. ...

javascriptvue.jswebpackbuildvuejs2

How can I make the row color of a jQuery datatable change when the row is selected?

One of my challenges involves implementing a jquery dataTable (view here) where each row contains a checkbox. I want the row's color to change when the checkbox is checked. This is the approach I attempted: <table id="tabellaOrdinaFarmaci" class=" ...

javascriptjqueryhtmlcssdatatable

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

javascriptarrayshtmlsvg

How can you convert a string to a boolean in Javascript?

Any tips on converting the options.isdedicated to a boolean value of true or false rather than a string? <?php $isdedicated = file_get_contents("/home/www/html/config.ini"); //echoed true?> <script> var options = []; options.isdedicated ...

javascriptphpjquery

Navigating between different pages within a website or application using Her

I'm currently working on an Angular front end website using the Yoeman Angular package and hosting it on Heroku with the Node.js build pack. Heroku is able to build the project without any errors, running Gulp and Bower to install dependencies. Howev ...

angularjsnode.jsheroku

The optimal method to simulate a $http promise in this particular situation

I am trying to work with a factory function that directly returns an http promise. It is several layers deep, but I am only interested in mocking the success and error parts of it. This is what the code looks like: user.create() .success(function(res ...

angularjsunit-testingmocking

Encountering difficulties in sending the data to Firebase through the contact form

import React, { useState } from 'react' import styled from 'styled-components' import Title from '../Components/Title' import { InnerLayout, MainLayout } from '../Styles/Layout' import ...

javascriptreactjsfirebasegoogle-cloud-firestore

"react commands" are not recognized as an internal or external command by any program or batch file

Initially, everything was working smoothly until I decided to download some updates from the git repository. However, upon execution, I encountered an error message stating that "react scripts" are not recognized as an internal or external command, operabl ...

javascriptreactjsnpm

leveraging angular service with ionic framework

(function () { 'use strict'; angular .module('app') .factory('UserService', UserService); UserService.$inject = ['$http']; function UserService($http) { var service = {}; ...

javascriptangularjsionic-framework

Using JavaScript to make an asynchronous call to the server via AJAX

Is it true that clients can block JavaScript in their browsers? If so, what impact does it have on AJAX calls - do they still function properly? ...

javascriptasp.netajax

What could be causing the misalignment of the Datepicker calendar in Material UI?

I have integrated a datepicker using the library "@mui/x-date-pickers/DatePicker". import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { Locali ...

javascriptcssreactjsmaterial-uidatepicker

Preserve file sequence with jquery file upload

I recently came across an interesting upload script at the following link: This script utilizes jquery file upload to allow for uploading multiple files simultaneously. I'm curious about how to transmit the order in which the files were selected to t ...

javascriptphpjqueryajaxfile-upload

Varying ng-click depending on another value

When a user uploads their own photo, I resize the image, add an ng-click attribute, compile it, and append it to a new element. This process is triggered once upon photo upload: var myElement = angular.element(image); // getting the image myElement.attr( ...

jqueryangularjs

Create a project using Next.js and integrate it with the tailwindcss framework

My application utilizes TailwindCSS and NextJs. I am facing an issue where certain classes are not working after running npm run start, following a successful run of npm run dev. For example, the classes h-20 / text-white are not functioning as expected, w ...

javascriptreactjsnext.jstailwind-css

Having trouble accessing PDF files on Electron framework

Despite following the advice provided in similar questions' answers, such as including webPreferences: { plugins: true } in the options when creating a BrowserWindow instance, I am still encountering issues. Every attempt to open or view a PDF ...

javascriptnode.jspdfelectronchromium