IE11: focus with caret doesn't work

by Stephane de Luca

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<div>
    
    <div ng-init="evaluate()"></div>
    
    <table class="OAD">
        <tbody>
           <tr>
                <th colspan="3">Add Three Numbers</th>
            </tr>
            <tr>
                <th>Number 1</th>
                <th>Number 2</th>
                <th>Number 3</th>
            </tr>
            <tr>
                <td>
                    <input select-on-click="number"
                        device="device"
                        ttype="number" 
                        pattern="[0-9]+([\.|,][0-9]+)?" step="1"
                        ng-model="numbers[0]"
                        ng-change="evaluate()"/>
                </td>
                <td>
                    <input select-on-click="" 
                        type="number" 
                        pattern="[0-9]+([\.|,][0-9]+)?" step="1"
                        ng-model="numbers[1]"
                    ng-change="evaluate()"/>
                </td>
                <td>
                    <input select-on-click="" 
                        type="number" 
                        pattern="[0-9]+([\.|,][0-9]+)?" step="1"
                        ng-model="numbers[2]"
                    ng-change="evaluate()"/>
                </td>
    
            </tr>
            <tr>
                <th colspan="2">Result</th>
                <th>{{evaluation}}</th>
            </tr>
        </tbody>
    </table>
</div>

SCSS

* {
    font-family: AvenirNextCondensed-regular, arial, "sans-serif";
}


.OAD input
{
	background-color: rgba(255,255,255,.5);
	padding: 2px;
	font-size: 16pt;
	border: 2px solid lightgray;
	border-radius: 25px;
	color: orange;
	text-align: right;
 
    &[type="number"] {
        background-color: red;
    }
    
	&:focus {
		outline:	        none;
		border-color:	    orange;
		background-color:	orange;
		color:              white;
	}
}

JavaScript

var app = angular.module('myApp', []);

app.directive('selectOnClick', function () {
	return {
		restrict: 'A',
		scope: {
			selectOnClick:'@',
			device:'='
		},
		link: function (scope, element, attrs) {
			scope.initialValue = null;
		
            console.log("input link to element="+element+", this="+this);

            if (scope.selectOnClick=='number') 
			{
				console.log("input selectOnClick = "+scope.selectOnClick);
				console.log("input isWindows8 = "+scope.device.isWindows8);
				
				if (!scope.device.isWindows8) {
					$(element).attr('type', 'number')
				} else {
					$(element).attr('type', 'text')
				}
			}
			
			$(element).blur(function(e){
				//console.log("input blur, this="+this.value);
				if (this.value == '') {this.value = scope.initialValue;}
			});
 
			$(element).focus(function(e){
				if (!scope.initialValue) scope.initialValue=this.value;
				//this.select();
				//console.log("input focus, this="+this.value);
				if (this.value == scope.initialValue) {this.value = '';}
			});
		}
	};
});


app.controller('myCtrl', function ($scope) {
	
    $scope.device = {'isWindows8': true};
    
	$scope.numbers = [0, 1, 2];
    $scope.evaluation = null;
    $scope.evaluate = function() {
        $scope.evaluation = 0;
        for (var i in $scope.numbers) {
            try {
                $scope.evaluation += parseInt($scope.numbers[i]);
            }
            catch(e) {}
        }
    };
});