JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://dvmsykbq2wgf8.cloudfront.net/release/73bdd74048731341634d17ff52d155de622934e9/js/dojo.min.js"></script>
<div class="container">
<h1>iOS7 trim test</h1>
<p>Enter some text into the input field and then blur to see the different trim approaches</p>
<form role="form">
<div class="form-group">
<input id="inputText" data-dojo-type="Sds/Form/TextBox" name="something" data-dojo-props="
label:'Enter some text',
placeholder: 'Enter some text',
focusNodeClass: 'form-control'
" value="" />
</div>
<div class="form-group">
<label>No trim</label> <pre id="test0Value"></pre>
</div>
<div class="form-group">
<label>Prototype trim</label> <pre id="test1Value"></pre>
</div>
<div class="form-group">
<label>Dojo trim</label> <pre id="test2Value"></pre>
</div>
<div class="form-group">
<label>Regex v1 trim</label> <pre id="test3Value"></pre>
</div>
<div class="form-group">
<label>Regex v2 trim</label> <pre id="test4Value"></pre>
</div>
JavaScript
require(['js/StorefrontBase.min'], function () {
require([
'dojo/_base/lang',
'dojo/dom',
'dijit/registry',
'dojo/parser',
'Sds/Form/TextBox',
'dojo/domReady!'],
function (
lang,
dom,
registry,
parser) {
parser.parse();
var input = registry.byId('inputText');
var input = registry.byId('inputText');
input.watch('value', function (n, o, v) {
dom.byId('test0Value').innerHTML = v;
dom.byId('test1Value').innerHTML = v.trim();
dom.byId('test2Value').innerHTML = lang.trim(v);
dom.byId('test3Value').innerHTML = v.replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g, '').replace(/\s+/g, ' ');
dom.byId('test4Value').innerHTML = v.replace(/^\s+|\s+$/g, "");
});
});
});