JSFiddle - React, Tailwind, and code Playground
by chad
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container" ng-app="myApp">
<form class="navbar-form navbar-left" role="search" ng-controller="SearchCtrl" action="myserver/search/api/" method="POST">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default" ng-click="myClick($event);" ng-bind="btn_text"></button>
</form>
</div>
JavaScript
/*! angular-shims-placeholder - v0.2.1 - 2014-10-10
* https://github.com/jrief/angular-shims-placeholder
* Copyright (c) 2014 Jacob Rief; Licensed MIT */
(function (angular, document, undefined) {
'use strict';
angular.module('ng.shims.placeholder', []).directive('placeholder', [
'$timeout',
function ($timeout) {
if (!angular.mock) {
var test = document.createElement('input');
if (test.placeholder !== void 0)
return {};
}
return {
restrict: 'A',
require: '?ngModel',
priority: 1,
link: function (scope, elem, attrs, ngModel) {
var orig_val = getValue(), is_pwd = attrs.type === 'password', text = attrs.placeholder, emptyClassName = 'empty', domElem = elem[0], clone;
if (!text) {
return;
}
if (is_pwd) {
setupPasswordPlaceholder();
}
setValueWithModel(orig_val);
elem.bind('focus', function () {
if (elem.hasClass(emptyClassName)) {
elem.val('');
elem.removeClass(emptyClassName);
elem.removeClass('error');
}
});
elem.bind('blur', updateValue);
if (!ngModel) {
elem.bind('change', updateValue);
}
if (ngModel) {
ngModel.$render = function () {
setValue(ngModel.$viewValue);
};
}
function updateValue(e) {
var val = elem.val();
if (elem.hasClass(emptyClassName) && val === text) {
return;
}
if (document.documentMode <= 11) {
$timeout(function () {
setValueWithModel(val);
}, 0);
} else {
setValueWithModel(val);
}
}
function setValueWithModel(val) {
setValue(val);
if (ngModel) {
ngModel.$setViewValue(val);
...