change input character to other character - javascript

I have an input text field that users should type their name in it (kind of).
I see in a website that every letter I type it changes the letter immediately to another character in my own language. for instance it changes the "D" in English to "ی".
I want the same thing.
How can I achieve this? should I use JavaScript and change every key code on keydown event?

Related

How can I make an input placeholder dynamically move with cursor?

I have an input inside my form, it holds a value price of a product,
at the beginning the input text placeholder is '$':
<input [placeholder]="$"/>
Now when ever I write something I want the '$' letter of the place holder to move with the cursor but inside the place holder and not as a text, for example when I write 123 it will show it like this 123$, what I did is at each change inside the input I add the letter '$' at the end of the input text but that it's not practical, I want it the letter '$' to be as a placeholder in the background and not part of the actual price.
Any help is appreciated.
Seems to me you'd create a filter (or a "pipe" in Angular 2 parlance). Your scope value can be modified in the view using a template without changing the original value.
https://angular.io/docs/ts/latest/guide/pipes.html
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value and disapear as soon as the user enters a value.
What you want to do is to format the value that can't be achived with placehoder.
I'll go with a directive allowing you to configure the currency to display and where to display it. Just like TestMask Lib
Since the "$" symbol is not meant to be part of the text and is used for guidance for the user, wouldn't you be better of implement this as something like:
<label>$</label><input type="text" placeholder="Enter value in USD" />
This way the $ will remain constant in front of the entered value.

jQuery check if input field characters are highlighted

Background
I have a page that has 3 input elements which takes currency numbers
These input element of type number with jQuery handles which letting up to 2 decimal placing. If user tries to input 3rd decimal, it does not print which is great.
However...
Issue
When input already has valid 2d.p input such as 12.11 and wishes to highlight the field characters (such as click drag highlight to blue) to change/overwrite all, the jQuery handler think that its 3rd decimal input and does not print BUT what it actually needs to do is to overwrite the whole and start from the beginning.
So
Is there a way to check if the input field characters are highlighted?
I know that there is a way around this if my input has type="text" and just use selectionStart and selectionEnd BUT I want to keep it as type="number".
Code: jsfiddle DEMO
Any other suggestion to jQuery code handling 2 decimal place, I would appreciate
If I am understanding your issue correctly, try the following minimal update to detect if the user has 'highlighted' the input value:
if (CharAfterdot > 3 && !window.getSelection().toString()) { return false; }
So if a 'selection' is found via the above method (not empty / undefined) the code allows further input (in your case overriding via highlight).
Updated fiddle:
https://jsfiddle.net/qtr30w05/3/

Reading input from user but not displaying it in the text field - HTML, JavaScript

I am currently working on a encoder. I basically have a textarea which accepts the string. When a letter is displayed using the document.onkeydown(event.keycode) I record the keystrokes and display it back on the same field. The problem arises after the onkeydown() finishes, the encrypted letter displays on the TextArea followed by the original letter.
I tried deleting the last added letter using splice or substring functions but for a fraction of a second you can see the letter or if you hold a key you can see the actual letter. So how do I hide the original input?
Is there is something similar in javascript like C's getch() where a key is pressed and no output is shown?
Thanks in advance.
The function you're looking for is preventDefault().
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
So inside your event handler, you would call preventDefault on the event parameter. This prevents any default behavior from occurring, and lets you defined it yourself. In your case, this would prevent the letter pressed from being added to the input field.
For example:
function onClick(e) {
e.preventDefault();
//your code here
}

Input box doesn't allow multiple dots

I want to know there is any code that user can't input multiple dots in same text box, like that:
0.0.01
If they entered 0.1 then its not allow to again enter any dots in input field.
If this is in Winforms, then just check in the TextChanged event. Simply check if the last character entered is a ".". If it is, and there is a second "." in the TextBox already, then you just delete the last dot.
The following should work
use onKeyPress event in javascript
count the no. of dots in the value
if no. of dots is more than one then set event.keyCode value to 8 (key code for backspace)

Live pattern matching in a textarea to trigger events

If you had a textarea, and you wanted to execute a javascript function after a pre-determined 2 character string was entered, how might you go about monitoring for that string?
A caveat is that the 2 character string might not be entered on sequential key presses.
Example:
You want to trigger an event after the 2 character string "<<" is entered. So you are typing and you enter "<", then you click somewhere else in the textarea and change some text, then come back to where you left off and put a second "<" character next to the first. The fact that there are two adjacent "<<" characters should trigger an event that can be capture by javascript. How would you monitor for and create that event?
You can check the entire textarea content onkeyup. I doubt that the textarea's content will become so big so as to make it prohibitive.
document.getElementById('textarea-id').addEventListener('keyup', function () {
this.value = this.value.replace('>>', '<<');
});

Categories