-2

I am trying to capitalize user input on a PDF form. I want to capitalize each word of user input, regardless of whether they type it or paste it in the field. I would like exceptions like "ASAP", if possible.

To further complicate it, I would like it to be done instantly, as the user is typing in the field, before they go to the next field.

Example: "lorem ipsum dolor sit amet" changed to, "Lorem Ipsum Dolor Sit Amet" instantly.

Possible? Thanks in advance..

Jordan
  • 29
  • 4
  • Possible duplicate of [With jQuery, how do I capitalize the first letter of a text field while the user is still editing that field?](https://stackoverflow.com/questions/2017456/with-jquery-how-do-i-capitalize-the-first-letter-of-a-text-field-while-the-user) – 4b0 Nov 22 '19 at 07:10

1 Answers1

0

You wanted a working example. It should work on most Browsers, but Caret position may not be at the end on some Browsers. You can easily get correct output using this technique anyways.

//<[CDATA[
/* js/external.js - tiny library for reuse */
var doc, bod, html, nav, mobile, M, I, S, Q, special, unspecial, ucFirst, ucEvery; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; html = doc.documentElement; nav = navigator;
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
special = function(str){
  return str.replace(/&/g, '&amp;').replace(/'/g, '&apos;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
unspecial = function(str){
  return str.replace(/&amp;/g, '&').replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}
ucFirst = function(string){
  var s = string.split('');
  if(s.length)s[0] = s[0].toUpperCase();
  return s.join('');
}
ucEvery = function(string){
  for(var i=0,a=string.split(' '),s,r=[],l=a.length; i<l; i++){
    r.push(ucFirst(a[i]));
  }
  return r.join(' ');
}
/* you may want to do the rest below here on another external page (the load end must stay) - or not */
var guarantee = I('guarantee');
I('uc_every').onkeyup = function(e){
  if(e.key !== ' '){ // not a space bar
    var v = ucEvery(this.value);
    this.value = v; guarantee.innerHTML = special(v);
  }
}
}); // load end
/* external.css */
html,body{
  background:#ccc;
}
*{
  box-sizing:border-box;
}
input[type=text]{
  width:100%;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <input id='uc_every' type='text' value='' />
  <div id='guarantee'></div>
</body>
</html>
StackSlave
  • 10,613
  • 2
  • 18
  • 35
  • So how do I use this in my form? Do I put it as a "Custom Keystroke Script", and how do I call it as the user is typing? – Jordan Nov 22 '19 at 12:26