文本输入框的高度根据用户输入进行调整

Question

有没有一种方法可以使用户在textInput字段上到达“行”的末尾，并在下一行继续，并增加文本框的高度，以便他们可以看到输入内容的全部内容？现在，文本继续显示在同一行上，从而使第一个键入的内容不再可见。考虑到如果它们到达文本框的末尾，则增加文本框的高度也将起作用，然后出现滚动条，使它们可以返回到所键入内容的顶部。

library('shiny')
ui<-fluidPage(
  fluidRow(
    textInput(inputId = "response1", label = "Type your Response Below")
  ))
server<-function(input,output,session)
{}
shinyApp(ui=ui, server=server)

Answer 1

实现此目的的另一种方法是使用textAreaInputnot textInput，它接受参数rows。根据textAreaInput 文档，此参数采用“输入的可见字符行的值”。

因此，它可以像这样使用：

library('shiny')
ui<-fluidPage(
  fluidRow(
    textAreaInput(inputId = "response1", label = "Type your Response Below", rows=4)
  ))
server<-function(input,output,session)
{}
shinyApp(ui=ui, server=server)

PS：textAreaInput有自己的更新值函数：（updateTextAreaInput以防万一您使用的textInput是 的等效项updateTextInput）

Answer 2

简要地说，我的建议是使用HTML标记textarea，然后为其赋予闪亮的小部件CSS样式。

在下面的例子中我第一次创造了一个新div的，我把HTML标记textarea与id=response2和标签。然后，我添加了textInputfrom 的css样式，并textarea使用标签head和将其应用于标签style。

完整示例：

library(shiny)
ui <- fluidPage(

    # Default style of normal textInput applied to the textarea (HTML tag)
    tags$head(
      tags$style("textarea {
                    width:300px; 
                    height:34px;
                    display: block;
                    padding: 6px 12px;
                    font-size: 14px;
                    line-height: 1.42857143;
                    color: #555;
                    background-color: #fff;
                    background-image: none;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                  }

                  textarea:focus {
                    border-color: #66afe9;
                    outline: 0;
                    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
                 }"
      )
    ),


    h3("Normal text input"),
    textInput(inputId = "response1", label = "Type your Response Below"),


    h3("Styled textarea"),
    withTags(
      div(
        h5(b("Type your Response Below")), 
        textarea(id = "response2")
      )
    ),


    br(),
    h3("Text from the styled textarea"),
    textOutput("out")
)

server<-function(input, output, session) {
  output$out <- renderText({
    input$response2
  })
}

shinyApp(ui = ui, server = server)

编辑：

使用少量代码完成相同操作的另一种方法是将闪亮输入的css类添加form-control shiny-bound-input到textarea标签，并使用style属性更改宽度和高度。

library(shiny)
ui <- fluidPage(
    h3("Normal text input"),
    textInput(inputId = "response1", label = "Type your Response Below"),

    h3("Styled textarea"),
    withTags(
      div(
        h5(b("Type your Response Below")), 
        textarea(id = "response2", 
                 class = "form-control shiny-bound-input",
                 style = "width: 300px; height: 34px")
      )
    ),

    br(),
    h3("Text from the styled textarea"),
    textOutput("out")
)

server<-function(input, output, session) {
  output$out <- renderText({
    input$response2
  })
}

shinyApp(ui = ui, server = server)