0

<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この動作を防止したいと思います。onURLSubmitjavascript 関数をステップ実行してみましたが、関数が を返すと入力要素の値がリセットされることに気付きました。したがって、JavaScriptを使用してこれを防ぐ方法がよくわかりません。

4

1 に答える 1