文本输入框的高度随用户输入调整

Question

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

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

简而言之，我的建议是使用 HTML 标签 textarea 然后给它 css 闪亮小部件样式。

在下面的示例中，我首先创建了一个新的 div，我在其中放置了带有 id=response2 的 HTML 标签 textarea 和一个标签。然后我添加了 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)

编辑：

用较少的代码做同样事情的另一种方法是将闪亮输入 form-control shiny-bound-input 的 css class 添加到 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)

Answer 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)

文本输入框的高度随用户输入调整

height of textInput box adjust with user input

user-input

r

shiny