<input>
1 つの要素のみで構成されるフォームがあります。
<form>
<input
type="text"
name="webpage-activity-url"
placeholder="URL"
value="[value inserted by templating engine]"
/>
<button type="submit" class="button button-secondary" data-action="urlSubmit">
Submit
</button>
</form>
また、フォームが送信されたときに呼び出される javascript (coffeescript の形式) もあります。
onURLSubmit: (e)->
e.preventDefault()
# console.log('urlSubmit')
url = @$el.find('input[name="webpage-activity-url"]').val()
if _.trim(url) == ''
return false
if url.indexOf('//') == -1
url = 'http://' + url
unless @$el.find('iframe').length > 0
iframe = $('<iframe />').insertAfter(@$el.find('.instructor-ui-box').first())
@setIframeSrc url
@$el.find('input[name="webpage-activity-url"]').val('')
コーヒースクリプトに慣れていない場合に備えて、JavaScript にコンパイルされた同じ関数を次に示します。
WebpageActivityLayout.prototype.onURLSubmit = function(e) {
var iframe, url;
e.preventDefault();
url = this.$el.find('input[name="webpage-activity-url"]').val();
if (_.trim(url) === '') {
return false;
}
if (url.indexOf('//') === -1) {
url = 'http://' + url;
}
if (!(this.$el.find('iframe').length > 0)) {
iframe = $('<iframe />').insertAfter(this.$el.find('.instructor-ui-box').first());
}
this.setIframeSrc(url);
return this.$el.find('input[name="webpage-activity-url"]').val('');
};
私の問題は次のとおりです。フォームが送信されると、ユーザーがフォームの要素に入力した値がクリアされ、input 要素<input>
の属性で指定された値に戻されます。placeholder
この動作を防止したいと思います。onURLSubmit
javascript 関数をステップ実行してみましたが、関数が を返すと入力要素の値がリセットされることに気付きました。したがって、JavaScriptを使用してこれを防ぐ方法がよくわかりません。