When using the text-transform: Uppercase property, it works fine. However, there is one issue - when I type a lowercase "i", it displays as an uppercase "I" instead of the Latin letter "İ". Is there a way to achieve this using jQuery or another method?
I have devised a workaround. Although it may not be the most elegant solution, it gets the job done.
The basic idea is that whenever the "i" key is pressed within the input field, we intercept the action and substitute it with our custom character.
// Taken from Stack Overflow: http://stackoverflow.com/a/1064139/2205195
function insertAtCaret(elem,text) {
var txtarea = elem;
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false ) );
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;
var front = (txtarea.value).substring(0,strPos);
var back = (txtarea.value).substring(strPos,txtarea.value.length);
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
$(".js-filter").keydown(function(event){
if (event.which == 73) {
event.preventDefault();
insertAtCaret($(this)[0], "İ");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="js-filter form-control" type="text" value="" style="text-transform:Uppercase">Here's a link to a jsFiddle demo in case you prefer it.
Regrettably, I was unable to locate a straightforward CSS solution, but rest assured that this method should serve its purpose effectively.
I am currently working on a coding project that involves allowing a user to click a button on the screen and view a paragraph that they can edit. I removed the readonly part of my code, but the paragraph is still not editable. How can I make it so that the ...
Consider the following code snippet: $scope.letters = ['A', 'B', 'C', 'D']; $scope.numbers = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; $scope.selectedLetter = 0; There are two select tags in t ...
Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...
The issue I am facing revolves around the visibility of the navbar component when using route.push(). It appears that the navbar is not showing up on the page, while the rest of the content including the footer is displayed. My goal is to navigate to a dy ...
I have recently been experimenting with the ModX Revolution manager and had a question about converting my CSS into ModX Resources instead of files. I am interested in utilizing Templates and their variables as well. Do you know if this is possible? Also, ...
My current goal is to have the user input a latitude and longitude into a text box, and then display a marker on the map for that location without needing to reinitialize the map each time. To start, I have set up my map like this: <script type="text/ ...
I have a button in my iframe that opens a div on the same page: <li> <input type='button' id='hideshow2' class='radiobutton' value='Core' onclick="showDiv('#content2')"> </li> <di ...
Currently, I am working on a toggle bar element that is functioning correctly in terms of styling the toggled button. However, I would like to add more animation to enhance the user experience. The concept is to have the active button slide to the newly s ...
My challenge is to have my webpage redirect after deleting a record from the database. Despite echoing out text and successfully deleting the record, it simply reloads me on the same page with an empty form. This is the button I am using echo '<f ...
I am looking for a solution to create a CSS effect or Javascript code that will hide a menu inside a div when the browser window or parent div is resized. I want to display another div with the same menu in horizontal orientation when the first one is hidd ...
I am facing an issue with my application where the content of an HTML element is received as a template from the server. I am attempting to assign this template, which is essentially a string, and have the variables within the template linked to the contro ...
Troubleshooting problems with block's child elements during the :hover event. Specifically, I have a pricing block where I want all texts to be of color #fff when hovered over. Currently, when hovering over the <h3> and <p> elements ...
Is there a way to retrieve the onclick event value change in jQuery when clicking on a DIV? $("ul li").click(function(){ var newValue = $(this).val(); }); $(function(){ alert(newValue); }); ...
My textarea seems to have a top margin that I can't get rid of. Here is my code: <v-flex d-flex xs12> <v-textarea v-model="test" outline type="text" color="primary" v-valida ...
My initial solution involved toggling the visibility on and off when hovering. However, this approach is not optimal as the menu should smoothly transition into view. When the visibility is toggled, the user does not experience the intended transition effe ...
Greetings! I'm attempting to achieve a background blur effect similar to the image shown. I am curious if this can be accomplished using only CSS3 or if JavaScript & Jquery are necessary for implementation: If CSS alone is sufficient, how can I ens ...
Looking at my menu, you'll notice the following layout: If one clicks on Recruitment in the menu, it correctly bolds the text as intended. However, an issue arises where the entire menu unexpectedly shifts 1 or 2px to the left. The menu is implemente ...
On my website, I have a contact form and I would like to keep track of how many people click on it and gather information similar to what Google analytics provides. Here is what I want the form to do: When the button is clicked Ensure that all fields are ...
My code currently places the profile card in the center of the screen regardless of screen size, but it often appears too small. How can I adjust the positioning of the profile card to almost fill the screen? @import url("https://fonts.googleapis.com/cs ...
Is there a way to vertically center text within a div and also horizontally center the div at the top of the screen? Visit this link for more details <div id='custom'> example text </div> #custom{ width: 50%; background: #FF00 ...