I have an input field
[:input {:type "text"}]
and I need to detect when user presses an Esc key while editing that field. How do I do that?
Add an :on-key-up (or :on-key-down) handler to the element:
[:input {:type "text"
:on-key-up #(when (= 27 (.-which %))
(do-something-here))}]
Related
I have an input field of type = "text". At the time of entering the details into the input, I can enter a long input. The value is getting stored appropriately in DB as well. After clicking on a submit button, I am disabling the field.
So input is still visible but with only the value (noneditable). The problem arises here as only the length of text box input is being displayed.
Is there any way in which the entire input will be displayed?
One way to do this is instead of disabling the input box, you just remove the onChange event on the inout field and style the text to look like its disabled. if onChange event is something like this:
onChange={() => ()}
It won't be able to change the value of the input field, as it has an anonymous function.
That's one of way of doing it.
How do I display the word <<required>> in the field of a required field and "choose a country" in the country field in an unbound form of an access fillable form.
Set the property Format of the textbox:
#,"<required>"
Replace comma with semicolon if that is your local separator.
The key here is whether you want "<>" and "choose a country" being the actual values of these controls.
I would add transparent background labels on top of the controls. Set the On Got Focus event of the underlying controls to make the corresponding label invisible and set the On Click event of the label to set the focus on the underlying control. You can also use the On Lost Focus event of the controls to see if you should turn the label visible again or not.
I have a form with multiple inputs, one of which is countries. I created my own dropdown box for the list of countries. I am using form_for, and I would like the browser's autocomplete to fill in this field if they select an autocomplete option on a different field in the form, but I do not want it to prompt the user only on this particular input field (as it gets in the way of my dropdown).
<%= form.text_field :country,
id: :sender_address_country,
class: "form-control country-search",
autocomplete: "off" %>
I have tried the :autocomplete and :autofill options I've seen in responses to similar questions in various combinations. :autocomplete works to stop the autocomplete prompt but does not allow the user to autofill if they select an autocomplete option from the first field in the form. Thanks for any assistance!
Something of a work around, but I decided to add a JavaScript effect to the field adding the autocomplete attribute while the field is focused, and it is removed when focus is removed.
$('.country-search').focusout(function () {
$(this).removeAttr('autocomplete');
});
$('.country-search').focusin(function () {
$(this).attr('autocomplete', 'off');
})
I'm currently trying to do :on-DOMCharacterDataModified so that I can see when a [:div] with {:contentEditable true} is edited.
How can I do this or should I be approaching this problem differently? I'm using this type of text input field so that I can highlight parts of the text input with different colors.
:on-input worked and then using (-> e .-target .-innerHTML) or (-> e .-target .-innerText) will get the new value.
I need to create a form containing a select field where the options depend on the currently available mail accounts. I retrieve these mail accounts in a API request after the page has loaded.
The following function creates the form with the select element.
(defn create-options [mail-accounts]
(for [m mail-accounts]
[:option {:key (keyword (str (:id m)))
:value (:id m)}
(:name m)]))
(defn render-mail-account-select [mail-accounts]
(let [form-state (r/atom {})]
(fn [mail-accounts]
(let [form [:form.mailing-form.form-horizontal
(into [:select.form-control {:field :list :id :mail-account}]
(create-options mail-accounts))]]
(pprint form)
[bind-fields form form-state]))))
The pprint gives me the following output:
;; Before the mail-accounts are loaded
[:select.form-control {:field :list, :id :mail-account}]
;; After the state update containing the mail accounts
[:select.form-control
{:field :list, :id :mail-account}
[:option {:key :24, :value 24} "First mail account name"]
[:option {:key :25, :value 25} "Second mail account name"]]
My problem is that the select on my page stays empty as if the select does not get re-rendered.
Addendum
I think I forgot to add some code:
I am wrapping this form in a KIOO component where I dereference my state atom.
(defsnippet choose-account-panel "html/static-panel.html" [:div.panel]
[]
{[:h4.panel-title] (content "3. Mail Account wählen")
[:div.panel-body] (content [render-mail-account-select (:mail-accounts #state)])})
This component then calls my render-mail-account-select function and should re-render the form properly.
You need to dereference a Ratom for Reagent to know which functions need to be called again when that Ratom changes. That dereferencing needs to happen within the anonymous function inside render-mail-account-select, or one of the functions that it calls. I can’t see any dereferencing happening here?
See the docs here for more details on Reagent’s rendering.
As already pointed out, your render function must reference something in your state atom in order to know when it needs to be re-rendered. However, if you also want your displayed form to have a 'default' value selected, you also need to set your state atom.
The bind-fields call will associate your form with the state atom. If there is nothing in the state atom, the form will be 'blank' i.e. none of the elements selected. If this is what you want, then that should be fine. However, if you want a value selected, then you should put that value in the atom. For example, if you wanted the first item to be already selected, then put :24 into the state atom i.e.
(swap! form-state assoc :mail-account :24)
Note that I'm not sure your option definition is correct. The docs seem to indicate that you only need the :key attribute with the value (as a keyword) in that attribute. I've not looked at the source to confirm this, but none of the examples use a :value attribute as well.
If you do the swap at the beginning of your render function, then the state atom will have been referenced and your component should re-render each time it is called with new arguments. When I say 'render function', in this case, I mean the anonymous function, not the outer one which creates the state atom.