web-dev-qa-db-ja.com

Rの光沢のあるWebアプリケーションで入力としてTextAreaを作成する方法

HTMLテキストエリアコントロールを使用して、ユーザーからの複数行入力を取り込みたい単純なWebアプリケーションを作成しようとしています。このような入力コントロールをShinyで作成するための特別な方法はありますか？

TextInputのヘルプページに多くのオプションが表示されない

textInput {shiny}   R Documentation
Create a text input control

Description

Create an input control for entry of unstructured text values

Usage

  textInput(inputId, label, value = "")
Arguments

inputId 
Input variable to assign the control's value to

label   
Display label for the control

value   
Initial value

Value

A text input control that can be added to a UI definition.

Examples

textInput("caption", "Caption:", "Data Summary")
rtextareatextinputshiny
31
Chinmay Patil

tagsを使用してtextareaを追加できます。これは、Shinyによって自動的に取得されます。

tags$textarea(id="foo", rows=3, cols=40, "Default value")

または、ストレートHTMLの方が快適であれば、次のこともできます。

HTML('<textarea id="foo" rows="3" cols="40">Default value</textarea>')

どちらの場合にも、 input$fooは、textareaの値を反映する必要があります。

40
Joe Cheng

他の人のために、Shinyチュートリアルに従ってカスタムUIコントロールを使用して問題を解決した方法を投稿します

まず、次のようにtextarea.jsファイルを作成しました

$(document).on("click", "textarea.inputTextarea", function(evt) {

  // evt.target is the button that was clicked
  var el = $(evt.target);

  // Raise an event to signal that the value changed
  el.trigger("change");
});

var inputTextareaBinding = new Shiny.InputBinding();
$.extend(inputTextareaBinding, {
  find: function(scope) {
    return $(scope).find(".inputTextarea");
  },
  getValue: function(el) {
    return $(el).text();
  },
  setValue: function(el, value) {
    $(el).text(value);
  },
  subscribe: function(el, callback) {
    $(el).on("change.inputTextareaBinding", function(e) {
      callback();
    });
  },
  unsubscribe: function(el) {
    $(el).off(".inputTextareaBinding");
  }
});

Shiny.inputBindings.register(inputTextareaBinding);

次に、shinyUI（）が呼び出される前に、光沢のあるwebappのui.Rに次の関数を追加しました

inputTextarea <- function(inputId, value="", nrows, ncols) {
    tagList(
        singleton(tags$head(tags$script(src = "textarea.js"))),
        tags$textarea(id = inputId,
                    class = "inputtextarea",
                    rows = nrows,
                    cols = ncols,
                    as.character(value))
    )
}

次に、上記で定義した関数を使用して、ui.Rに目的のtextareaコントロール要素を作成しました。

shinyUI(pageWithSidebar(

  # Application title
  headerPanel("Test Header Panel"),

  sidebarPanel(),

  mainPanel(
        inputTextarea('exampleTextarea', '',20,35 )
  )
))
26
Chinmay Patil

ここでは関係があるかもしれませんが、関係ないかもしれませんが、 shinyAce パッケージを作成して、AceテキストエディターをまとめてShinyで公開しました。 Aceは主にコード編集（さまざまな言語の構文強調表示を完備）に使用されますが、複数行のテキスト/コードを作成するためのテキスト領域のようなインターフェースを提供します。

例を確認してください で、それが探しているものかどうかを確認できます。 （構文の強調表示と色の組み合わせのテーマについては、さまざまな「モード」を試してください。）

15
Jeff Allen

バージョンから .14 shinyには textAreaInput が実装されています。

5
alko989

Joeの答え（ https://stackoverflow.com/a/14452837/5776618 ）に基づいて、タグを独自の関数にネストして、標準のShiny組み込み入力と同じ出力を実現することもできます関数。

textareaInput <- function(id, label, value, rows=20, cols=35, class="form-control"){
  tags$div(
    class="form-group shiny-input-container",
    tags$label('for'=id,label),
    tags$textarea(id=id,class=class,rows=rows,cols=cols,value))
  }

これは、JSコードを（必要に応じて）作成するのを回避する方法です。

  • 組み込みのShiny入力が呼び出されるのと同じ方法で呼び出す関数がある。
  • div、label、BootstrapのフォームコントロールCSSスタイルが含まれています（組み込みのShiny入力コントロールのように見えます）

関数の使用は、組み込みを使用する場合や、カスタムUIを作成する場合と同じです。

textareaInput("textareaID","Text Area Label", "Insert text here...", rows = 20, cols = 35)
3
Steve Ladavich

光沢のある入力感を維持しながら、カスタムの列数を許可する簡単なソリューションを次に示します。

_textareaInput <- function(inputID, label, value="", rows=10, columns=80) {
  HTML(paste0('<div class="form-group shiny-input-container">
    <label for="', inputID, '">', label,'</label>
    <textarea id="', inputID, '" rows="', rows,'" cols="', 
    columns,'">', value, '</textarea></div>'))
}
_

_ui.R_スクリプトに、次のコードを追加できます。

textareaInput("shazam", "My text box")

注： Bootstrap の感触をtextareaに取得するには、次を使用できます。

_textareaInput <- function(inputID, label, value="", rows=10) {
  HTML(paste0('<div class="form-group shiny-input-container">
              <label for="', inputID, '">', label,'</label>
              <textarea class="form-control" id="', inputID, 
              '" rows="', rows, '">', value, '</textarea></div>'))
}
_
2
Megatron