M Argus Chopin Gyver M Argus Chopin Gyver - 4 months ago 17
Javascript Question

make the search textbox in dataTables toUpperCase

I want to make the string of Search Textbox of dataTables to Upper Case, not only the css, but also the string.

Can I do that ?

*note : I want the upper case as the default, even when the capslock not active

Answer

To all CSS answers, the question states that the actual property must be uppercase, not just appear that way through styling.

Here is a quick vanilla JavaScript example that should run on any modern browser:

//Function to change case
function upperCaseValue(element) {
  //Test that passed element has a "value" field
  if( typeof element.value !== void 0) {
    //Overwrite value
    element.value = element.value.toUpperCase();
  }
}

//Fetch elements to watch
var search = document.getElementById("search");
var output = document.getElementById("output");
//Bind events
search.addEventListener("keyup", function(){
  //Change case
  upperCaseValue(search);
  //Use input
  output.innerHTML = search.value;
});
search.addEventListener("change", function(){
  //Change case
  upperCaseValue(search);
  //Use input
  output.innerHTML = search.value;
});
#search {
    text-transform: uppercase;
}
<input name="search" id="search" />
<p id="output"></p>