Leverage angular-translate to establish placeholder text upon blurring

Question

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!

javascript angularjs angular-translate

Answer 1

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

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 3

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;
    };
});

Answer 4

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;
    };
});

Leverage angular-translate to establish placeholder text upon blurring

Answer №1

Answer №2

Similar questions

issue encountered during resource provider setup

Experiencing issues with obtaining req.params.id undefined while initiating a put request

javascript Href and onclick malfunctioning

Can phantomJS be used to interact with elements in protractor by clicking on them?

Invoking a Typescript function from the Highcharts load event

Chrome Developer Tools - Array Length Discrepancies

Using SASS variables in JavaScript: A guide

Is there a way to input data into an AngularJS modal?

Issues with styled-components media queries not functioning as expected

Retrieve data from the database by selecting an option from the dropdown menu

I can't believe this ReactJs project generated this code automatically

Can you explain the steps to implement this feature in a modal window using jQuery?

i18next backend failing to load files

I keep getting redirected to a blank page by JS

Retrieve the input data following validation of an AngularJS form

"By selecting the image, you can initiate the submission of the form

Is Postman cooperating, yet Ajax is not playing nice?

The Google map shifts beyond the perceived limits of the world

Tips for extracting a value from a currently active list item's anchor tag with JQuery on Mapbox API?

Attempting to dynamically update the image source from an array when a click event occurs in a React component