Question

有没有办法让它如果用户到达＆＃34;行＆＃34;在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

简而言之，我的主张是使用HTML标记textarea，然后为其提供闪亮小部件的CSS样式。

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

修改

使用较少量的代码执行相同操作的另一种方法是将{s}类闪亮输入form-control shiny-bound-input添加到textarea标记，并使用{{更改宽度和高度1}}属性。

style

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

1 个答案: