test-app/app/templates/application.hbs
{{! template-lint-disable attribute-indentation }}
<h1>ember-content-editable</h1>
{{!-- template-lint-disable no-unbalanced-curlies --}}
<pre>
{{content-editable value=value placeholder={{this.placeholder}} maxlength=40
enter=(fn incrementProperty "enterCount" 1)
escape-press=(fn incrementProperty "escapeCount" 1)
length-exceeded=(fn displayLengthAlert)
id="text-input" class="important" autofocus=true}}
</pre>
<ContentEditable @value={{this.value}}
@onChange={{fn (mut this.value)}}
@placeholder={{this.placeholder}}
@maxlength={{40}}
@allowNewlines={{false}}
@onEnter={{fn this.incrementProperty "enterCount" 1}}
@onEscape={{fn this.incrementProperty "escapeCount" 1}}
@onLengthExceeded={{this.displayLengthAlert}}
@onKey={{fn this.incrementProperty "keypress" 1}}
id="text-input"
class="important"
@autofocus={{true}} />
<p class="jsTest-textOutput info">
value:
<pre id="text-output">{{this.value}}</pre>
</p>
<button {{on 'click' this.randomPlaceholder}} type="button">Modify Placeholder</button>
<br>
<br>
<div class="info">
<div>text length: {{this.value.length}}</div>
<div>enter pressed: {{this.enterCount}}</div>
<div>escape pressed: {{this.escapeCount}}</div>
<div>key-press: {{this.keypress}}</div>
<button {{on 'click' (fn (mut this.value) "")}} type="button">set value to empty string</button>
</div>
<ContentEditable @value={{this.nullValue}} @placeholder="placeholder for null value" />
<ContentEditable @value={{this.undefinedValue}} @placeholder="placeholder for undefined value" />