An angular directive for creating an immutable textbox that only allows copying, ideal for sharing urls.
This module is developed by Matthew Farver. I extracted it from an existing project since I thought it might be independently useful. I haven't added much in the way of configuration, but if you want an enhancement to the project feel free to request it.
##Requirements
AngularJS v1.3+ (tested, probably works on lower)
###Browser support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| ✔ | ✔ | Testing soon | Testing soon | Testing soon |
To use the directive, include the angular-immutable-textbox javascript file in your web page:
<!DOCTYPE HTML>
<html>
<body ng-app="app">
//.....
<script src="src/js/angular-immutable-textbox.js"></script>
</body>
</html>##Installation
####Bower
$ bower install angular-immutable-textbox --save
####Npm
$ npm install angular-immutable-textbox --save
then load it in your html
###Add module dependency Add the craterdome.immutableTextbox module dependency
angular.module('app', [
'craterdome.immutableTextbox'
]);Call the directive wherever you want in your angular html, add auto-click to make it highlighted automatically
<input type="text" ng-value="shareURL" immutable-textbox auto-click >##Alternative Installation
The directive itself is pretty simple, therefore it might be easier to simply fork the directive into your app.
function immutableTextbox() {
return {
restrict: 'A',
link: function ($scope, elem, attr) {
var raw = elem[0];
raw.onkeypress = function validate (evt) {
var theEvent = evt || window.event;
var key = theEvent.charCode || theEvent.which;
if (key !== 99 || (undefined === theEvent.ctrlKey || !theEvent.ctrlKey)) {
if (theEvent.preventDefault) {
theEvent.preventDefault();
} else {
theEvent.returnValue = false;
}
}
}
raw.onclick = function () {
raw.focus();
raw.select();
return false;
}
if (attr.hasOwnProperty('autoClick')) {
setTimeout(function () {
raw.focus();
raw.select();
}, 100);
}
}
};
}
immutableTextbox.$inject = [];
app.directive('immutableTextbox', immutableTextbox);