textInput 框的高度随用户输入而调整答案

【问题标题】：height of textInput box adjust with user inputtextInput 框的高度随用户输入而调整
【发布时间】：2016-12-12 07:50:06
【问题描述】：

有没有办法做到这一点，如果用户到达 textInput 字段上“行”的末尾，它会继续下一行并增加文本框的高度，以便他们可以看到全部内容他们打字了吗？现在，文本继续在同一行上，使首先键入的内容不再可见。考虑到如果他们到达文本框的末尾，增加文本框的高度也会起作用，然后会出现一个滚动条，允许他们返回到输入内容的顶部。

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

【问题讨论】：

标签： r shiny user-input

【解决方案1】：

简而言之，我的建议是使用 HTML 标记 textarea，然后为其赋予闪亮小部件的 css 样式。

在下面的示例中，我首先创建了一个新的div，在其中我将 HTML 标签textarea 与id=response2 和一个标签放在了一起。然后我添加了textInput 的css 样式，并使用标签head 和style 将其应用于textarea 标签。

完整示例：

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)

【讨论】：

这太完美了，谢谢，textarea 正是我要找的！

【解决方案2】：

实现此目的的另一种方法是使用textAreaInput 而不是textInput，它采用参数rows。这个参数，根据textAreaInput documentation，取“输入的可见字符行的值”。

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

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）

【讨论】：