Format text at blur

Developer
Kazuki Harada
Size
3,857 Kb
Views
12,144
  1. Format text at blur Previews
  2. Format text at blur HTML Codes
  3. Format text at blur JS Codes

How do I make an format text at blur?

What is a format text at blur? How do you make a format text at blur? This script and codes were developed by Kazuki Harada on 09 December 2022, Friday.

Format text at blur Previews
IQ Test

Format text at blur - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>format text at blur</title>
</head>
<body> <head> <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="sampleController"> <div class="container"> <form class="form-horizontal" name="validSampleForm" novalidate> <div class="panel panel-default"> <div class="panel-heading">ng-requiredを使った相関チェック</div> <div class="panel-body"> <div class="row"> <label class="col-xs-3 control-label">テスト： </label> <div class="col-xs-6"> <input type="text" name="testText"class="form-control" placeholder="なにか文字を入力してください" autocomplate="off" ng-model="model.textValue" ng-model-options="{ updateOn: 'blur'}" ng-minlength="5"> </div> <div class="col-xs-3"> <input type="text" name="testText"class="form-control" placeholder="なにか文字を入力してください" autocomplate="off" ng-model="model.textValue" ng-minlength="5"> </div> </div> <div class="row"> <label class="col-xs-3 control-label">テスト： </label> <div class="col-xs-6"> <!-- <input type="text" name="testText"class="form-control" placeholder="なにか文字を入力してください" autocomplate="off" ng-model="model.textValue" ng-model-options="{ updateOn: 'blur'}" ng-minlength="5" required fw-text-format="split" fw-format-opt="{ splitter: '-', groups: [3,4,4]}" ng-init="model.textValue='33333'"> --> <input type="text" name="testText"class="form-control" placeholder="フォーマットしてバインドします" autocomplate="off" ng-model="model.textValue" ng-model-options="{ updateOn: 'blur'}" ng-minlength="5" required fw-formatted-bind="charPadding" fw-format-opt="{ paddingValue: '0', digit: 12}" > <div ng-if="validSampleForm.testText.$dirty && validSampleForm.testText.$invalid"> <span ng-show="validSampleForm.testText.$error.required">入力してください</span> <span ng-show="validSampleForm.testText.$error.minlength">最小5文字です</span> </div> </div> <div class="col-xs-3"></div> </div> <div class="row"> <label class="col-xs-3 control-label">テスト： </label> <div class="col-xs-6"> <input type="text" name="dateText"class="form-control" placeholder="なにか文字を入力してください" autocomplate="off" ng-model="model.dateValue" ng-model-options="{ updateOn: 'blur'}" ng-minlength="6" required fw-text-format="exDateTime" fw-format-opt="yyyy/MM/dd hh:mm:ss"> <div ng-if="validSampleForm.dateText.$dirty && validSampleForm.dateText.$invalid"> <span ng-show="validSampleForm.dateText.$error.required">入力してください</span> <span ng-show="validSampleForm.dateText.$error.minlength">最小6文字です</span> </div> </div> <div class="col-xs-3"></div> </div> </div> <pre>{{model | json}}</pre> {{model.textValue | number}} </div> <div class="panel panel-default"> <div class="panel-heading">ng-requiredを使った相関チェック</div> <div class="panel-body"> <div class="row"> <label class="col-xs-3 control-label">config： </label> <div class="col-xs-9"> <input type="text" class="form-control" placeholder="format opts." ng-model-options="{ updateOn: 'blur'}" ng-model="model.inputText"> </div> </div> <div class="row"> <label class="col-xs-3 control-label">テスト： </label> <div class="col-xs-9"> <input type="text" name="inputText" class="form-control" placeholder="なにか文字を入力してください" autocomplate="off" ng-model="model.inputText" ng-model-options="{ updateOn: 'blur'}" ng-minlength="2" required sample-format ng-init="model.inputText='aaaaaaaaaa'"> <div ng-if="validSampleForm.inputText.$dirty && validSampleForm.inputText.$invalid"> <span ng-show="validSampleForm.inputText.$error.required">入力してください</span> <span ng-show="validSampleForm.inputText.$error.minlength">最小2文字です</span> </div> </div> <div class="col-xs-3"></div> </div> </div> <pre>{{model | json}}</pre> {{model.textValue | number}} </div> </form> </div>
</body> <script src="js/index.js"></script>
</body>
</html>

Format text at blur - Script Codes JS Codes

var app = angular.module('myApp', []);
app.controller('sampleController', ['$scope', function ($scope) {
}]);
app.directive('fwFormattedBind', ['$filter', function ($filter) { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCntlr) { // view から model へ var formatType = attrs.fwFormattedBind; var formatOpt = attrs.fwFormatOpt; /* if(angular.isDefined(attrs.ngInit)){ var val = ngModelCntlr.$modelValue; if(!ngModelCntlr.$isEmpty(val)){ scope.$apply(function() { ngModelCntlr.$setViewValue($filter(formatType)(val, formatOpt)); ngModelCntlr.$render(); }); } } */ ngModelCntlr.$parsers.push(function(v) { return $filter(formatType)(v, formatOpt); }); ngModelCntlr.$render = function() { ngModelCntlr.$commitViewValue(); var val = ngModelCntlr.$modelValue; if(ngModelCntlr.$isEmpty(val)){ element.val(ngModelCntlr.$viewValue); return; }else{ element.val(val); return; } }; element.on('blur', function() { if (attrs.disabled) { return; } scope.$apply(function(){ ngModelCntlr.$render(); }); }); } };
}]);
app.directive('sampleFormat', ['$filter', function ($filter) { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCntlr) { /* var currencyCode = $parse(attrs["amountFormat"])(scope); var currencyInfo = Currency.getInformationByCode(currencyCode); var offset = currencyInfo.map((x)=>x.offset).getOrElse(1); */ // model から view へ ngModelCntlr.$formatters.push(function(mval) { if(mval === undefined){ return NaN; } return "+++>" + mval + "<+++"; }); element.on('blur', function() { scope.$apply(function(){ ngModelCntlr.$render(); }); }); /* element.on('blur', function() { ngModelCntlr.$render(); }); */ // view から model へ /* ngModelCntlr.$parsers.push(function(amount) { return (amount * offset).toFixed(0); }); */ } };
}]);
app.directive('fwTextFormat', ['$filter', function ($filter) { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCntlr) { if(!ngModelCntlr) return; var formatType = attrs.fwTextFormat; var formatOpt = attrs.fwFormatOpt; ngModelCntlr.$render = function() { var val = ngModelCntlr.$viewValue; if(ngModelCntlr.$isEmpty(val)){ element.val(''); return; } ngModelCntlr.$commitViewValue(); if(!ngModelCntlr.$valid){ element.val(val); return; } if(val){ var formattedValue = $filter(formatType)(val, formatOpt); if(formattedValue){ element.val(formattedValue); }else{ element.val(val); } } }; element.on('blur', function() { ngModelCntlr.$render(); }); /* element.on('blur', function() { scope.$apply(function(){ ngModelCntlr.$render(); }); }); */ element.on('focus', function() { var val = ngModelCntlr.$viewValue; if(val){ element.val(val); }else{ element.val(''); } }); } };
}]);
app.filter('split', function($rootScope){ var basicFormatter = function(input, length, opts){ var begin = 0; var result = ""; var lenTotal = 0; for(i=0; i<opts.groups.length; i++){ var len = opts.groups[i]; if((length - begin) > len){ result = result + input.substr(begin, len) + opts.splitter; }else { result = result + input.substr(begin, (length - begin)); } begin += len; lenTotal += len; } if(begin <= length){ result = result + input.substr(begin, (length - begin)); } if(opts.suffix && length >= lenTotal){ result += opts.suffix; } return result; }; var multiFormatter = function(input, length, opts){ var begin = 0; var result = ""; var splitter = ""; var lenTotal = 0; for(i=0; i<opts.splitterGroups.length; i++){ splitter = opts.splitterGroups[i].splitter; var len = opts.splitterGroups[i].length; if((length - begin) > len){ result = result + input.substr(begin, len) + splitter; }else { result = result + input.substr(begin, (length - begin)); } begin += len; lenTotal += len; } if(begin <= length){ result = result + input.substr(begin, (length - begin)); } if(opts.suffix && length >= lenTotal){ result += opts.suffix; } return result; }; return function(input, optValue){ var length = input.length; if( length === 0){ return input; } var opts = $rootScope.$eval(optValue); if(opts.splitterGroups){ return multiFormatter(input, length, opts); }else{ return basicFormatter(input, length, opts); } };
});
app.filter('charPadding', ['$rootScope', function($rootScope){ var execPadding = function(number, ch, digit) { var numberLength = String(number).length; if (digit > numberLength) { return (new Array((digit - numberLength) + 1).join(ch)) + number; } else { return number; } }; return function(input, optValue){ if(input){ var opts = $rootScope.$eval(optValue); return execPadding(input, opts.paddingValue, opts.digit); }else{ return input; } }
}]);
app.filter('exDateTime', function($rootScope, $filter){ var convertDate = function(input){ if(!input){ return null; } var length = input.length; var year = '', month = '1', day = '1', hour = '0', min = '0', sec = '0'; if(length >= 4){ year = input.substr(0, 4); } if(length >= 6){ month = input.substr(4, 2); } if(length >= 8){ day = input.substr(6, 2); } if(length >= 10){ hour = input.substr(8, 2); } if(length >= 12){ min = input.substr(10, 2); } if(length >= 14){ sec = input.substr(12, 2); } return new Date(year, month - 1, day, hour, min, sec); }; return function(input, optValue){ var dat = convertDate(input); if(dat){ return $filter('date')(dat, optValue); }else{ return input; } };
});
Format text at blur - Script Codes
Format text at blur - Script Codes
Home Page Home
Developer Kazuki Harada
Username kazux
Uploaded December 09, 2022
Rating 3
Size 3,857 Kb
Views 12,144
Do you need developer help for Format text at blur?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kazuki Harada (kazux) Script Codes
Name
AngularJS Validate Test
Flip switch on angular
Canvas with AngularJS
Write char on canvas.
Write string on canvas.
A Pen by Kazuki Harada
Datepicker
Infinite-scroll list
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!