Last active
October 17, 2024 17:59
-
-
Save xiaodaigh/7150112 to your computer and use it in GitHub Desktop.
R Shiny: An textInput that only gets invalidated upon losing focus or when enter is pressed shiny::runGist("7150112")
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
library(shiny) | |
shinyServer(function(input, output, session) { | |
# Partial example | |
output$meh <- renderPrint({ | |
print("Press enter or focusout to update --- ") | |
print(input$myTextInput ) | |
}) | |
}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
library(shiny) | |
myTextInput <- function(inputId, label, value = "") { | |
#singleton(tags$head(tags$script(src = "/temp/mytextinput.js"))), | |
tagList(tags$label(label, `for` = inputId), tags$input(id = inputId, | |
type = "text", value = value,class="myTextInput")) | |
} | |
code = HTML(" <script> var myTextInputBinding = new Shiny.InputBinding(); | |
$.extend(myTextInputBinding, { | |
find: function(scope) { | |
return $(scope).find('.myTextInput'); | |
}, | |
getId: function(el) { | |
//return InputBinding.prototype.getId.call(this, el) || el.name; | |
return $(el).attr('id') | |
}, | |
getValue: function(el) { | |
return el.value; | |
}, | |
setValue: function(el, value) { | |
el.value = value; | |
}, | |
subscribe: function(el, callback) { | |
$(el).on('keyup.textInputBinding input.textInputBinding', function(event) { | |
if(event.keyCode == 13) { //if enter | |
callback() | |
} | |
}); | |
$(el).on('focusout.myTextInputBinding', function(event) { // on losing focus | |
callback(); | |
}); | |
}, | |
unsubscribe: function(el) { | |
$(el).off('.myTextInputBinding'); | |
}, | |
receiveMessage: function(el, data) { | |
if (data.hasOwnProperty('value')) | |
this.setValue(el, data.value); | |
if (data.hasOwnProperty('label')) | |
$(el).parent().find('label[for=' + el.id + ']').text(data.label); | |
$(el).trigger('change'); | |
}, | |
getState: function(el) { | |
return { | |
label: $(el).parent().find('label[for=' + el.id + ']').text(), | |
value: el.value | |
}; | |
}, | |
getRatePolicy: function() { | |
return { | |
policy: 'debounce', | |
delay: 250 | |
}; | |
} | |
}); | |
Shiny.inputBindings.register(myTextInputBinding, 'shiny.myTextInput');</script>") | |
shinyUI( | |
basicPage( | |
code | |
,myTextInput("myTextInput","My text input","On enter or focus out") | |
,textOutput("meh") | |
,HTML('<script src="https://gist.github.com/xiaodaigh/7150112.js"></script>') | |
)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for your package. I found it very useful. Just one question remains: how do I make ENTER act like TAB, i.e. when user presses ENTER, the customTextInput should lose focus and the next element receives focus, just as if TAB were pressed? Thanks in advance for your answer.