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

Trouble with ng-repeat when working with nested json data

Check out this app demo: http://jsfiddle.net/TR4WC/2/ I feel like I might be overlooking something. I had to loop twice to access the 2nd array. <li ng-repeat="order in orders"> <span ng-repeat="sales in order.sales> {{sales.sales ...

javascriptjsonangularjs

Iterating through a collection of objects, triggering a promise for each object and recording its completion

I have encountered a challenge where I need to iterate through an array of objects obtained from a promise, and for each object in the array, I must invoke another promise. After all these promises are executed, I want to display "DONE" on the console. Is ...

javascriptobjectecmascript-6promisees6-promise

vue.js and the various elements that make up its architecture

My component content is not appearing!!! I have checked the router multiple times and it seems to be functioning correctly, but when I run the project, the components are empty. Even though I have added a lot of content to them, they appear to be blank. ...

javascriptvue.jsvuejs2vue-componentvue-router

React Material Table - issue with data filtering accuracy

Currently in my React project, I am utilizing Material Table. While everything appears to be rendering correctly, the filtering and searching functionalities are not working as expected. To provide more context, below is a sample of the code: ht ...

javascriptreactjsmaterial-uimaterial-designmaterial-table

Deciding on excluding empty key:value pairs from an object for various filtering needs

One of the features in my app allows users to filter results by "blood group" and "city", along with other areas. The information is retrieved from a database using Axios for Vuejs, incorporating query strings within the URL. For example: http://example.co ...

javascriptlaravelvue.jsvuejs2

the typeahead.js method in Twitter's process() function is filling the list with undefined values

I am encountering a similar issue as described in the thread Twitter Typeahead Ajax results undefined. Since that problem remains unresolved, I am revisiting the topic with hopes of shedding light on any missing details. My setup includes standalone Typea ...

javascriptjqueryajaxtwitter-bootstraptypeahead.js

The custom directive in Vue utilizes the refreshed DOM element (also known as $el)

I am looking to create a custom directive that will replace all occurrences of 'cx' with <strong>cx</strong> in the Dom Tree. Here is my current approach: Vue.config.productionTip = false function removeKeywords(el, keyword){ i ...

javascripthtmlvue.jsvuejs2

Having difficulty including the Column Name in the Jqgrid footer for sum calculation

I was working on the Jqgrid code and found a way to display the sum correctly in the footer of the grid. var colSum = $("#dataGrid").jqGrid('getCol', 'Amount', false, 'sum'); $("#dataGrid").jqGrid('footerData', &a ...

javascriptjqueryhtmljqgrid

Efficient React search feature with pagination that avoids redundant setState calls

Currently in the process of incorporating search functionality with pagination in React. After reviewing numerous examples, it appears they all involve using setState() twice, both before and after making an AJAX call to the backend. Here is a snippet of m ...

javascriptreactjspaginationstate

Refreshing jQuery via Ajax Response

In our JSF2 application, we encounter situations where we need to re-invoke the JavaScript (specifically jQuery for UI styling) when making Ajax calls. However, it seems that the JavaScript functions are not being called upon receiving the Ajax response fr ...

javascriptajaxjqueryjsf-2

The state update is triggering a soft refresh of the page within Next.js

In my Next.js project, I have integrated a modal component using Radix UI that includes two-way bound inputs with state management. The issue arises when any state is updated, triggering a page-wide re-render and refreshing all states. Here is a snippet of ...

javascriptreactjstypescriptnext.jsstate

Trouble arises when attempting to delete rows from my database with the use of HTML, PHP, and

I am developing an application where I have implemented this table: <?php require_once 'Connect2db3.php'; ?> <form> <fieldset> <article class="rondehoeken"> <header> <div class="streep1"></div& ...

phpjavascripthtml

Initialization of an empty array in Typescript

My promises array is structured as follows: export type PromisesArray = [ Promise<IApplicant> | null, Promise<ICampaign | ICampaignLight> | null, Promise<IApplication[]> | null, Promise<IComment[]> | null, Promise<{ st ...

javascripttypescriptpromise

Contrasting {} and {} as any in TypeScript

Seeking clarity on TypeScript, what sets apart (foo and foo2) from (foo3 and foo4)? (foo and foo2) as well as (foo3 and foo4) produce identical results, yet during compilation, a red underline appears under foo2 and foo3. https://i.stack.imgur.com/lWaHc. ...

javascriptreactjsangulartypescript

Issue with md-stretch-tabs in Angular-Material causing a problem

I am in the process of developing an Angular-based application. ISSUE: I included md-stretch-tabs in my md-tabs element, but when I switch to tab#2, the tab retracts as if there is not enough space to flex. Is this problem related to dependencies or the c ...

javascripthtmlangularjsangular-material

Retrieving visual information from Google Street View entity

Looking for a solution to extract imagery from the Google Street View panorama within a web page? In my program, I navigate specific routes using Google Street View's javascript API controlled by an embedded Java applet on the same page. I am seeking ...

javascriptgoogle-mapsappletcapture

Using onChange input causes the component to re-render multiple times

As I delve into learning React, I've encountered some challenges. Despite thinking that I grasped the concept of controlled components, it appears that there's a misunderstanding on my end. The issue arises after an onChange event where I notice ...

javascriptreactjsmultiple-input

Tips for reducing the size of your JavaScript buffer

Is it the correct way to convert a buffer to a string, trim it, and then convert back to a buffer in Node.js v6.12.x? var buf = Buffer.alloc(xxxxxx); ..... // buffer receives its value ..... let buffParsed = String.fromCharCode.apply(null, buf); buffPa ...

javascriptnode.js

The issue of batch-wise data clustering on Google Maps when zooming in or out

//The code snippet provided below initializes a map with specified settings and clusters markers based on the data sent in patches of 10000.// var mapDiv = document.getElementById('newmap'); map = new google.maps.Map(mapDiv, { center ...

javascriptphpjquerygoogle-mapsgoogle-maps-markers

Guide to retrieving and showing specific items from a DropDownList in a Text box using JavaScript, HTML, and AngularJS

Can someone explain how to extract and select items from a DropDownList and display them in a Textbox using JavaScript/HTML/AngularJS? Here are more details: I have a dropdown list with many items. When I click on an item from the list, it should be dis ...

javascripthtmlangularjs