User Tools

Site Tools


action:Custom_HTML_Prompt

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
action:Custom_HTML_Prompt [2017/03/14 04:47]
peternlewis
action:Custom_HTML_Prompt [2017/10/04 02:54] (current)
peternlewis [Using JavaScript]
Line 9: Line 9:
  
 ===== How To Use ===== ===== How To Use =====
 +
   - Create a standard HTML page with a form that uses [[token:​Variable|Keyboard Maestro Variables]] in the Form Field //Name// attribute   - Create a standard HTML page with a form that uses [[token:​Variable|Keyboard Maestro Variables]] in the Form Field //Name// attribute
     * If the Variable contains spaces, you must replace them with underscores (`_`) in the HTML code     * If the Variable contains spaces, you must replace them with underscores (`_`) in the HTML code
Line 17: Line 18:
   - Use these //​Variables//​ in any other Actions you need   - Use these //​Variables//​ in any other Actions you need
  
 +The action will wait for the window to complete before continuing unless you turn on *Asynchronously* (v8+) in the gear BUTTON{{{⚙}}} menu.
  
 +By default, the window floats above all others, but you can optionally turn off *Floating* (v8+) in the gear BUTTON{{{⚙}}} menu.
  
-You design the HTML form using standard HTML code, which can be stored ​in either a file or as text in the Action. ​ You can, of course, use any Web/HTML editor you like.  If you'd like some suggestions,​ see the [[Custom_HTML_Prompt#​WebHTML_Editors|Web/​HTML Editors]] section at the bottom of this page for editors that others have found useful.+You can optionally turn on *Resizable* (v8+) in the gear BUTTON{{{⚙}}} menu.
  
- +You design the HTML form using standard HTML code, which can be stored in either a file or as text in the Action. ​ You can, of course, use any Web/HTML editor you like.  If you'd like some suggestions,​ see the [[Custom_HTML_Prompt#​WebHTML_Editors|Web/​HTML Editors]] section at the bottom of this page for editors that others have found useful.
-----+
  
 ===== HTML Window Design ===== ===== HTML Window Design =====
Line 57: Line 59:
 Then you can control-click on elements and use Inspect Element and get an inspector window, including a Console tab. Then you can control-click on elements and use Inspect Element and get an inspector window, including a Console tab.
  
----- 
 ===== Using Keyboard Maestro Variables in the HTML Form ===== ===== Using Keyboard Maestro Variables in the HTML Form =====
- 
  
 Keyboard Maestro ensures sync between *Keyboard Maestro Variables* and the HTML form field values. ​ The **[[http://​www.w3schools.com/​Tags/​att_input_name.asp|HTML name attribute]]** is used to identify the *Keyboard Maestro Variable*. ​ For example, **''​Web Name''​** is the *Keyboard Maestro Variable* shown below in the HTML **[[http://​www.w3schools.com/​Tags/​tag_input.asp|<​input>​]]** tag.  You must replace spaces in the *Keyboard Maestro Variable* name with underscores when used on the HTML form. Keyboard Maestro ensures sync between *Keyboard Maestro Variables* and the HTML form field values. ​ The **[[http://​www.w3schools.com/​Tags/​att_input_name.asp|HTML name attribute]]** is used to identify the *Keyboard Maestro Variable*. ​ For example, **''​Web Name''​** is the *Keyboard Maestro Variable* shown below in the HTML **[[http://​www.w3schools.com/​Tags/​tag_input.asp|<​input>​]]** tag.  You must replace spaces in the *Keyboard Maestro Variable* name with underscores when used on the HTML form.
Line 80: Line 80:
 Note: Prior to 7.1 autofocus did not work for textarea types. Note: Prior to 7.1 autofocus did not work for textarea types.
  
-The *Keyboard Maestro Variable* “//**HTML Result Button**//​” ​is set to the parameter in the `Submit()` function. ​ For example:+The [[token:​HTMLResult|%HTMLResult%]] token (v8+) is set to the the parameter in the `Submit()` function, and can be used in actions later in this instance like any other text token.  ​The deprecated _HTML Result Button_ variable is also set to the parameter. 
 + 
 +For example:
  
 ```html ```html
Line 89: Line 91:
  
 Prior to version 7.1, the *Keyboard Maestro Variables* //**HTML Result Button**// was not changed when the window was closed by other than a Submit call - as of 7.1+ the variable is cleared when the window first appears. Prior to version 7.1, the *Keyboard Maestro Variables* //**HTML Result Button**// was not changed when the window was closed by other than a Submit call - as of 7.1+ the variable is cleared when the window first appears.
- 
  
 ==== Excluding Set and/or Saving of Form Fields ==== ==== Excluding Set and/or Saving of Form Fields ====
Line 99: Line 100:
 |*data-kmignore* | avoid setting and saving the form field| |*data-kmignore* | avoid setting and saving the form field|
  
 +==== Handling HTTP links ====
 +
 +By default, http: and other links (everything except file: links) are passed to the  to open as normal.
 +
 +You can elect (v8+) to handle schemes yourself by including a `data-kmhandleschemes` attribute in the body element, or by implementing the `KMHandleSchemes()` function.
  
-----+Either can return the schemes you want to handle (most likely only http) as a comma or space separated list.
  
 ===== Using JavaScript ===== ===== Using JavaScript =====
Line 106: Line 112:
 You may use any JavaScript that you normally could in an HTML page. You may use any JavaScript that you normally could in an HTML page.
  
-Keyboard Maestro ​provides ​the following ​built-in ​JavaScript functions:+Keyboard Maestro ​calls the following JavaScript functions:
  
 ^ Function ^ Called ^ ^ Function ^ Called ^
Line 112: Line 118:
 | KMWindow() | to return the desired size or frame of the window as a string| | KMWindow() | to return the desired size or frame of the window as a string|
 | KMWillShowWindow() | when the window will be shown| | KMWillShowWindow() | when the window will be shown|
-| KMDidShowWindow() | when the window was just shown (7.1+) |+| KMDidShowWindow() | when the window was just shown (v7.1+) | 
 +| KMHandleSchemes() | to return the schemes you wish to handle within the web page (v8+) | 
 +| KMWillCloseWindow() | called when the window is about to be closed (v8.0.3+) |
  
 From within the window, you can call the following functions: From within the window, you can call the following functions:
Line 122: Line 130:
 | window.KeyboardMaestro.GetVariable( '​KMVariableName'​ ) | returns the value of a variable | | window.KeyboardMaestro.GetVariable( '​KMVariableName'​ ) | returns the value of a variable |
 | window.KeyboardMaestro.SetVariable( '​KMVariableName',​ '​value'​ ) | sets the value of a variable | | window.KeyboardMaestro.SetVariable( '​KMVariableName',​ '​value'​ ) | sets the value of a variable |
 +| window.KeyboardMaestro.GetDictionary( '​Dictionary',​ '​Key'​ ) | returns the value of a dictionary entry |
 +| window.KeyboardMaestro.SetDictionary( '​Dictionary',​ '​Key',​ '​value'​ ) | sets the value of a dictionary entry |
 | window.KeyboardMaestro.ProcessTokens( '​%ShortDate%'​ ) | returns the text token expansion | | window.KeyboardMaestro.ProcessTokens( '​%ShortDate%'​ ) | returns the text token expansion |
 | window.KeyboardMaestro.Calculate( '10 + 32' ) | returns the result of the calculation | | window.KeyboardMaestro.Calculate( '10 + 32' ) | returns the result of the calculation |
Line 127: Line 137:
  
 Prior to version 7.1, using SetVariable to set a value to something other than a string can [corrupt the variable](https://​forum.keyboardmaestro.com/​t/​corrupted-variables-after-custom-html-setvariable-update-i-fixed-it-please-read/​2881). Prior to version 7.1, using SetVariable to set a value to something other than a string can [corrupt the variable](https://​forum.keyboardmaestro.com/​t/​corrupted-variables-after-custom-html-setvariable-update-i-fixed-it-please-read/​2881).
 +==== Form Validation ====
  
-==== Debugging JavaScript in the Form ====+You can use HTML5’s form validation to automatically validate ​the fields. ​ Specify their input types (eg "​email"​ or "​url"​ instead of "​text"​),​ as well as other properties like minimum/​maximum numbers and so on, and then instead of simply:
  
 +    onclick="​window.KeyboardMaestro.Submit('​OK'​)"​
  
-Please see this forum post [How to Enable JavaScript Console for KM Custom HTML Prompt](https://​forum.keyboardmaestro.com/​t/​javascript-console-in-custom-html-prompt/​2589/​8).+do something like:
  
-(!Be aware that the system will not allow Keyboard Maestro Engine to see keys typed in its own windows so the [[trigger:​Typed String | Typed String triggers]] will not work within Keyboard Maestro Engine windows.+    onclick="​if ​document.getElementById('​myform'​).checkValidity() ) { window.KeyboardMaestro.Submit('​OK'​) } else { document.getElementById('​myform'​).reportValidity() }"
  
----- +==== Debugging JavaScript in the Form ====
-===== Downloads ​===+
-  - None+
  
----- 
  
 +Please see this forum post [How to Enable JavaScript Console for KM Custom HTML Prompt](https://​forum.keyboardmaestro.com/​t/​javascript-console-in-custom-html-prompt/​2589/​8).
 +
 +(!) Be aware that the system will not allow Keyboard Maestro Engine to see keys typed in its own windows so the [[trigger:​Typed String | Typed String triggers]] will not work within Keyboard Maestro Engine windows.
  
 ===== See Also ===== ===== See Also =====
- 
----- 
  
 === Actions === === Actions ===
  
-* [[action:​Prompt for User Input|Prompt for User Input]]+* [[action:Alert|Alert]] action 
 +* [[action:​Prompt_for_User_Input|Prompt for User Input]] 
 +* [[action:​Prompt_With_List|Prompt With List]] action 
 +* [[action:​Prompt_for_File|Prompt for File]] action 
 +* [[action:​Get_Touch_Bar_Selection|Get Touch Bar Selection]] action 
 +* [[action:​Show_Palette_of_Macros|Show Palette of Macros]] action
 * [[:​Actions|See all Actions]] * [[:​Actions|See all Actions]]
  
-----+=== Tokens === 
 + 
 +* [[token:​AlertButton|%AlertButton%]] token 
 +* [[token:​PromptButton|%PromptButton%]] token 
 +* [[token:​HTMLResult|%HTMLResult%]] token 
 +* [[:​Tokens|All Tokens]]
  
 === Forum === === Forum ===
Line 162: Line 182:
 - [[https://​forum.keyboardmaestro.com/​t/​png-optimizer/​3282|PNG Optimizer]] - [[https://​forum.keyboardmaestro.com/​t/​png-optimizer/​3282|PNG Optimizer]]
 - [[https://​forum.keyboardmaestro.com/​search?​q=Custom%20HTML%20Prompt%20action|Keyboard Maestro Forum topics about Custom HTML Prompt action]] - [[https://​forum.keyboardmaestro.com/​search?​q=Custom%20HTML%20Prompt%20action|Keyboard Maestro Forum topics about Custom HTML Prompt action]]
- 
 ==== External References ==== ==== External References ====
  
Line 174: Line 193:
  
   * If your favorite Web/HTML editor is not listed here, and you would like to include it, post a request in the [[https://​forum.keyboardmaestro.com/​c/​wiki|Keyboard Maestro Forum, Wiki section]].   * If your favorite Web/HTML editor is not listed here, and you would like to include it, post a request in the [[https://​forum.keyboardmaestro.com/​c/​wiki|Keyboard Maestro Forum, Wiki section]].
 +
 +**Keywords:​* ​ Custom HTML Prompt, User Prompt, HTML, Dialog
action/Custom_HTML_Prompt.1489481233.txt.gz · Last modified: 2017/03/14 04:47 by peternlewis