Leverage angular-translate to establish placeholder text upon blurring

Just starting out with Angular and facing the challenge of implementing localization in my project. I have a lot of input fields that need their placeholders translated. In my HTML, I'm trying to achieve this:

<input type="email" placeholder="{{ 'TRANSLATION_KEY' | translate }}" onfocus="this.placeholder=''" onblur="this.placeholder='{{ 'TRANSLATION_KEY' | translate }}'" required>

Unfortunately, it seems like this part of the code is not functioning as expected:(

onblur="this.placeholder='{{ 'TRANSLATION_KEY' | translate }}'"

Can anyone provide guidance on how to successfully set the translated value to the placeholder on blur? Any help would be greatly appreciated!

javascriptangularjsangular-translate

Answer №1

Here's an alternative solution that is both universal and simple. To improve your input in the view, include this line of code:

onfocus="this.ph=this.placeholder;this.placeholder=''" onblur="this.placeholder=this.ph"

Answer №2

This method offers a sound solution to the issue at hand through this JSFiddle link:

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
    <input  type="email" placeholder="{{placeholder}}" ng-focus="setPlaceholder()" ng-blur="setPlaceholder('TRANSLATION_KEY')" required>
</div>

JS:

angular.module('myApp', [])
.controller('myCtrl', function ($scope, $filter) {
    $scope.placeholder = $filter('translate')('TRANSLATION_KEY');

    $scope.setPlaceholder = function (data) {
        $scope.placeholder = $filter('translate')(data);
    };
})
.filter('translate', function () {
    return function (data) {
        return data;
    };
});

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

Capture and store the current ionic toggle status in real-time to send to the database

I have a list of names from the database that I need to display. Each name should have a toggle button associated with it, and when toggled, the value should be posted back to the database. How can I achieve this functionality in an Ionic application while ...

angularjstypescriptionic-frameworkionic3

Using the Angular two-way binding tag within a Spring Boot Thymeleaf application allows for seamless data synchronization between

I have a JSON file where my image is defined like this certLogoURL : "/img/ocjp.gif" I am attempting to show this image in my Thymeleaf template using the following code: <img th:src="@{ {{certificate.certLogoURL}} }" > </img> However, the ...

angularjsspringthymeleaf

What is the best way to transfer data from Material UI to Formik?

I'm facing an issue when trying to integrate a Material UI 'Select' component into my Formik form. It seems like I am unable to pass the selected values from the Material UI component to Formik's initialValues. const [selectedHours, se ...

javascriptreactjsmaterial-uiformik

Looking to resolve an issue that is arising in the antd tree component

Having trouble with the antd tree component - when searching and checking/unchecking a field, all previously selected data is unchecked. I want to only update the field that is currently being changed. Not sure how to fix this issue, any help would be appr ...

javascriptreactjsantd

Display the bash script results on an HTML webpage

My bash script fetches device status and packet loss information, slightly adjusted for privacy: #!/bin/bash TSTAMP=$(date +'%Y-%m-%d %H:%M') device1=`ping -c 1 100.1.0.2 | grep packet | awk '{ print $6 " " $7 " " $8 }'` device2=`pin ...

javascripthtmlbash

What is the method with the greatest specificity for applying styles: CSS or JS?

When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...

javascripthtmlcss

The error message "TypeError: dom.getElementsByTagName is not a function in Node.js" indicates

I have just started learning HTML and web development. I am trying to extract a list of tags from an HTML document but I keep receiving the error message TypeError: dom.getElementsByTagName is not a function. I am making a GET request using axios, then u ...

javascriptnode.jscheerio

Building objects with attributes using constructor functions

My question pertains to JavaScript constructor function prototypes. Suppose I have code like the following: a = function (name){this.name = name}; a['b'] = function (age){this.age = age}; c = new a('John'); c.a['b'](30); Is ...

javascript

Encountering an ExpressionChangedAfterItHasBeenCheckedError in Angular 6 when selecting an option from a dropdown menu

How can we fix the error mentioned below through code changes? Situation An input dropdown UI is safeguarded against unintentional value changes by a modal. However, triggering an event (such as click or focus) on the dropdown leads to the ExpressionChan ...

javascriptangulartypescriptangular-bootstrap

Ensuring the accuracy of forms using third-party verification services

While working on an Angular form validation using an external service, I encountered a cannot read property of undefined error. The component contains a simple form setup: this.myForm = this.fb.group({ username: ['', [this.validator.username] ...

javascriptangulartypescript

How come my counter is still at 0 even though I incremented it within the loop?

Within my HTML file, the code snippet below is present: <div id="userCount" class="number count-to" data-from="0" data-to="" data-speed="1000" data-fresh-interval="20"></div> In my Ja ...

javascripthtmlfirebasegoogle-cloud-firestore

Rearrange list items by dragging and dropping

Here is the HTML and TypeScript code I have implemented for dragging and dropping list items from one div to another: HTML: <div class="listArea"> <h4> Drag and Drop List in Green Area: </h4> <ul class="unstyle"> <l ...

javascriptangularhtmltypescriptdrag-and-drop

Ways to access information and functions from another component

Creating a timer dashboard where alarms can change the background color of the timer. Looking to display the timer on a different page with the set background color from the dashboard, but struggling to pass data between components successfully. http ...

javascriptreactjsvue.js

What is the method for specifying input type in an HTML document?

I need assistance with controlling an input field labeled "Size" in HTML. The input should only allow users to enter Numbers and specific characters like X, ', and ". Other alphabets and characters should be restricted. I am working with AngularJS as ...

htmlangularjshtml-input

Solving the pyramid of doom with Node.js

I have been struggling to find a way to simplify my code structure. Here is what I have come up with so far: router.use('/create', function(res,req,next) { try { var data = { startDate: new Date(req.body. ...

javascriptnode.jsexpress

What is the most effective way to enlarge an HTML table in the center?

Currently, I am dynamically generating an HTML table using a repeater. The table consists of four columns that I populate with company data. My goal is to enable users to click on a row and have another row appear below it, containing a Google map and addi ...

javascriptjqueryasp.nethtml

Tips for triggering an event from a function instead of the window

Everything is functioning as expected, with the event listener successfully capturing the custom event when it is dispatched from the window and listened for as loading, all seems to be working well. const MyLib = mylib(); function mylib() { const re ...

javascripttypescript

Sorting objects in Angular using ng-options

I am working with an object that has the following structure: { 3019: 'Javascript', 3046: 'Css' } After that, I display this object in a select element like this: <select ng-model="langChoosed" ng-options="key as val ...

javascriptangularjsng-options

Transmitting flawless data to the Angular controller

In my Angular application, I have some checkboxes that are pre-checked and in the ng-pristine state. How can I receive these inputs in my controller without marking them as dirty when the form is submitted? <input type="checkbox" name="c1" name="favor ...

javascripthtmlangularjsforms

What could be causing the button click event to not be triggered in AngularJS?

Can you explain why the click event doesn't work when the loader is displayed on click? I have set up a scenario where data load is delayed and trying to navigate away from this situation (trying to move to the next page but if there is a loader on th ...

angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeationic-framework