Troubleshooting problems with AngularJS placeholders on Internet Explorer 9

On my partial page, I've included a placeholder like this:

<input name="name" type="text" placeholder="Enter name" ng-class="{'error':form.name.$invalid}" ng-model="Name" required />

I have also set up client side validation for the text box.

if (this.name.$error.regEx) {
        $scope.errorList.push({              
            Message: "Invalid name"
        });
    }

To handle regular expressions, I created a directive. This code is functioning correctly in Chrome and IE 10. However, in IE 9, when I copy and paste the correct name into the text box, a client side validation error occurs (as it considers the placeholder text as well). Can anyone assist me in resolving this issue?

javascriptangularjs

Answer №1

Internet Explorer 9 (IE9) lacks support for the placeholder attribute as it belongs to HTML5. Thankfully, there is an ingenious workaround provided by thomseddon

angular.module('test', [])
.directive('placeholder', function($timeout){
    var i = document.createElement('input');
    if ('placeholder' in i) {
        return {}
    }
    return {
        link: function(scope, elm, attrs){
            if (attrs.type === 'password') {
                return;
            }
            $timeout(function(){
                elm.val(attrs.placeholder);
                elm.bind('focus', function(){
                    if (elm.val() == attrs.placeholder) {
                        elm.val('');
                    }
                }).bind('blur', function(){
                    if (elm.val() == '') {
                        elm.val(attrs.placeholder);
                    }
                });
            });
        }
    }
});

Source: https://gist.github.com/thomseddon/4703810

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

Determine how to use both the "if" and "else if" statements in

/html code/ There are 4 textboxes on this page for entering minimum and maximum budget and area values. The condition set is that the maximum value should be greater than the minimum value for both budget and area. This condition is checked when the form i ...

javascriptphphtml

Even after implementing a setTimeout function, both Promises and Axios requests are still resulting in a

Recently, I've encountered an issue with the Reverse Geocode API from TomTom. The problem arises when I send multiple latitude and longitude coordinates (around 72 of them) to the API, resulting in frequent 429 responses. To address this issue, I att ...

javascriptaxioses6-promisetomtom

Discrepancy Between Angular JS $resource POST Response and Server Output

I am currently working with a resource factory in my project that utilizes a POST method called update: PnrApp.factory('Feed', function ($resource, $cacheFactory, $q, $rootScope) { var Feed = $resource('api/feeds/:post', { post: ' ...

angularjs

Sending a properly formatted string on Postman

My website allows users to answer coding problems. I am looking to store the questions and answers in a mongodb database. However, when testing the routes on my express application, I am encountering difficulties in sending formatted text in the request to ...

javascriptnode.jsreactjsexpresspostman

Updating contact list to a database table structure

Currently, my code displays the data in address books, but I would like it to be shown in a table instead. I attempted to use document.write to create the table, but I'm unsure how to populate the table with the data rather than the address book forma ...

javascripthtmlcss

The output of the incorrect .bind() example is not as

I recently came across the .bind() method while learning JavaScript. The example I found on MDN here was quite helpful, but I decided to add some console.log() statements for better understanding. this.x = 9; // Here 'this' refers to the glob ...

javascriptnode.jsbind

Error in React .js: Unable to access property 'name' as it is undefined

I keep encountering this issue: Uncaught TypeError: Cannot read property 'name' of undefined In my code, I have a user object defined in the App.js file. However, when I attempt to access its properties within my Person component, it throws a ...

javascriptreactjs

Finding the index of a column based on a continuous sequence of values can be achieved by following these

Consider this sequence of numbers representing components on a page: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Every set of 3 numbers makes up a page, with indexing restarting for each new page. Essentially, it follo ...

javascriptcounting

Angular-oauth2-oidc does not successfully retrieve the access token when using OAuth2 and SSO

Here's an issue I'm facing: I've been attempting to integrate SSO and OAuth2 flow using angular-oauth2-oidc. When testing with POSTMAN and ThunderClient in VS Code, I managed to receive the correct response (the access_token). However, I am ...

javascriptangularoauth-2.0single-sign-onaccess-token

Add a plethora of images to the canvas

Just starting out with Fabric.js and trying to figure out how to draw a picture on the canvas after a drop event. I managed to do it once, but am struggling with inserting more pictures onto the canvas (each new drop event replaces the previous picture). ...

javascripthtmlcanvasfabricjs

Typescript does not produce unused members

Having an issue with the JS code that TypeScript compiler is generating. Here's an example class: // Class export class UserDTO { Id: number; FirstName: string; LastName: string; DateOfBirth: Date; getFullName(): string { ...

javascripttypescriptknockout-mapping-plugin

Send the chosen value from a dropdown menu to a PHP script

<style type="text/css"> form select { display:none; } form select.active { display:block; } </style> <script type="text/javascript"> window.onload = function () { var allElem = document. ...

phpjavascripthtml

Request spanning multiple origins is not permitted

Is there a way to upload an image from the front end to the backend? I plan to utilize the ngFileUploader bower Component for this task. Below is a snippet of my frontend code: function SampleController(SampleData,Upload,$http) { var vm = this; ...

angularjsnode.jsexpress

Determine if the browser displays <select multiple> as a modal dialog

Is it possible to use JavaScript to detect whether a specific browser displays a focused <select multiple> element as a popup or strictly as an inline box? On certain platforms, like the Android Browser and iOS Safari, the appearance of a popup can ...

javascripthtmlselectcross-browserbrowser-feature-detection

Query params in the component router of Angular 1

Currently, I am working with Angular 1 and the new component router. The $routeConfig that I have set up looks like this: { path: '/list', name: 'ListCmp', component: 'listCmp', useAsDefault: true } I am trying to navigate ...

angularjsangular-component-router

How can we manually trigger $(document).ready() from within the ready callback of head.js using jQuery?

I am in search of ways to enhance the loading speed of a web application, particularly one that encompasses numerous javascript files on every HTML page. My plan is to experiment with head.js on a specific page to observe if it has a positive impact on loa ...

javascriptjqueryhead.js

Using target="_blank" does not seem to open a popup window in React

The issue is that the target="_blank" attribute is not working properly for the modal popup window. Instead, the link is opening in the same page and the popup is closing. <TermLink to="/legal/privacy-policy" target="_blank"> Privacy Pol ...

javascriptreactjs

The front end button stubbornly refuses to comply and redirect to another page

I am having trouble getting my button element to redirect my page to another page. I have tried using an onclick function inside the button tag with window.location.href, as well as creating a separate function for the redirect, but nothing seems to be wor ...

javascripthtmlcssbutton

Dynamically Insert a Row into a Table using Bootstrap and JavaScript

Can someone provide assistance with my code? Specifically, I am looking to add the index number whenever a user clicks the add button and would like to know how to insert text input similar to the first row. I am currently in the process of learning JavaSc ...

javascriptlaravellaravel-8bootstrap-5

The attributes `ng-class` and `class` are used to apply CSS styles

Can you provide guidance on when to use one method over the other for HTML elements such as div, span, and tables? Is it advisable to mix both methods or could it potentially cause some issues? ...

angularjstwitter-bootstrap