Advertisement
brandonjp

cursorInsert.js

Dec 4th, 2023
1,280
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.66 KB | Source Code | 0 0
  1. // Original JavaScript code improved and cleaned up:
  2.  
  3. /*
  4.  * USAGE: Give your HTML textarea or text input element an ID.
  5.  * Give your button an onClick="insertThisInThere(text2insert, theInputIDwhereItGoes);".
  6.  *
  7.  * EX:  <input type="text" id="myInput" />
  8.  *      <input type="submit" value="Insert ® symbol" onClick="insertThisInThere('®', 'myInput');" />
  9.  *
  10.  */
  11.  
  12. function insertThisInThere(thisChar, thereId) {
  13.     function theCursorPosition(ofThisInput) {
  14.         // Set a fallback cursor location
  15.         var theCursorLocation = 0;
  16.        
  17.         // Find the cursor location via the IE method...
  18.         if (document.selection) {
  19.             ofThisInput.focus();
  20.             var theSelectionRange = document.selection.createRange();
  21.             theSelectionRange.moveStart('character', -ofThisInput.value.length);
  22.             theCursorLocation = theSelectionRange.text.length;
  23.         } else if (ofThisInput.selectionStart || ofThisInput.selectionStart === 0) {
  24.             // ...or the Firefox way
  25.             theCursorLocation = ofThisInput.selectionStart;
  26.         }
  27.         return theCursorLocation;
  28.     }
  29.    
  30.     // Now get ready to place our new character(s)...
  31.     var theIdElement = document.getElementById(thereId);
  32.     var currentPos = theCursorPosition(theIdElement);
  33.     var origValue = theIdElement.value;
  34.     var newValue = origValue.substr(0, currentPos) + thisChar + origValue.substr(currentPos);
  35.  
  36.     theIdElement.value = newValue;
  37. }
  38.  
  39. /**  EXAMPLE HTML:
  40.  
  41. <h2>Set your cursor anywhere inside the text field, then click the button to insert text at the cursor location. Each button has an onClick="sendChar2Id('®','toThisId');"</h2>
  42.  
  43. <br/><hr /><br/>
  44.  
  45. <input type="text" id="inputOne" value="inputOne" /><br />
  46. <input type="submit" onClick="insertThisInThere('*A*','inputOne')" value="Insert *A* into inputOne" />
  47.  
  48. <br/><hr /><br/>
  49.  
  50. <textarea id="inputTwo">inputTwo</textarea><br />
  51. <button onClick="insertThisInThere('*B*','inputTwo');">Insert *B* into inputOne</button>
  52.  
  53. **/
  54.  
  55. // Explanation:
  56.  
  57. // The `insertThisInThere` function is designed to insert a given character into a text input or textarea element at the current cursor position.
  58. // It takes two parameters: `thisChar` (the character to be inserted) and `thereId` (the ID of the input element where the character should be inserted).
  59.  
  60. // Inside the function, the `theCursorPosition` function is defined, which determines the current cursor position within the input element.
  61. // It checks if the browser supports the Internet Explorer method (`document.selection`) or the Firefox method (`ofThisInput.selectionStart`) to retrieve the cursor position.
  62. // It returns the cursor position as an integer.
  63.  
  64. // The main part of the function starts by retrieving the input element using the provided ID (`thereId`).
  65. // It then calls the `theCursorPosition` function to get the current cursor position within the input element.
  66.  
  67. // The original value of the input element is stored in the `origValue` variable.
  68. // The `newValue` variable is then created by concatenating the original value up to the current cursor position (`origValue.substr(0, currentPos)`),
  69. // the character to be inserted (`thisChar`), and the remaining part of the original value (`origValue.substr(currentPos)`).
  70.  
  71. // Finally, the `newValue` is assigned back to the input element's value, effectively inserting the character at the current cursor position.
  72.  
  73. // The provided example HTML demonstrates the usage of the `insertThisInThere` function by showing two input elements: one text input and one textarea.
  74. // Each has a button that triggers the function with different characters to be inserted at the current cursor position.
Tags: JavaScript js
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement