I want to set the maximum length of character for my texteditor. Users will enter text in Iframe in the editor. I am getting the characters through the keydown event.
I get the "maxlength" by calculating length with text & maxlength and by setting keyflag as false.
My problem is that I now have to allow the user to edit text when user press backspace, delete, ctrl+special keys.
Is there any other general ways to achieve the maxlength property?
You can do as follows once it reaches to max limit
var text = $('#editor').text().substring(0,maxlength);
text you can add to your editor as a value
Dudes finally i done it..
On keyDown event and using keycodes we can achieve these functions...
keydown(e)
{
if(e.keyCode==8) //for backspace key
{
// your code
}
}
like wise we can write our required functions
Related
I have a input field
<input type="text" [value]='$' (keydown)="handleKeyDown($event)">
Dollar sign is prefilled.
How can I restrict user to enter only the pattern '$1,000.00' (US dollars with $ prefix);
So far , I was able to restrict the user from entering values other than $ , . and numbers But, they can enter consecutive commas, dollar symbol and dots.
handleKeyDown(event:any){
let key = event.keyCode || event.which;
if((key>=48 && key<=57) || (key===52 || key===190 || key===188 || key===8)){
return true;
}else{
return false;
}
}
To restirct that I am using a Regex and regex works fine. But, I am not sure in which event I should use the Regex.test(), because if I use it in keyup() event the character is already populated in the text filed, there is no point in doing event.preventDefault().
If I do it in keydown() event then I can not extract the complete value of the text field before the keydown() event is finished. And I should also accomodate copy and paste in the field.
There is no privision for blur event, I need to check this during the user input only, and avoid it from appearing in the text filed.
Is there anyway to achieve this? Would you suggest an easier way using the reactive form input field?
Like Sebastian Ciocarlan said you can remove the $ from the input and just allow numbers and commas if you don't need to store the $.
But instead of using a <div> you can use matPrefix from angular material (if you use it) to add $ in front of your input (or matSuffix if you want to put it at the end).
You can see an exemple here : https://material.angular.io/components/form-field/overview#prefix--suffix
I trying to get cursor position inside input field, which is type number
<input type="number" id="myInput">
And I tried standard selectionStart property, but apparently it does not work for number fields.
var start = document.getElementById("myInput").selectionStart;
Is there any why or workaround to get that information inside keypress event?
My end goal is it prevent leading zeros in such input field, for that I need to know is user input coming to start of existing value.
Currently I stripping those zeros in keyup event:
var inputFieldValue = $(this).val();
$(this).val(removeLeadingZeros(inputFieldValue)); // removeLeadingZeros: inputString.replace(/^0+/, "");
But with that solution those zeros became visible for a second before been removed,
that behavior I want to prevent.
Any ideas? How I can get end result string before it provided to user inside input element? Even as selectionStart value not available for number input, browser somehow know where to put those new characters, so there must be some way to capture that and may be prevent some default behavior or stop bubbling.
You can try RegExp
<input type="number" id="myInput">
$("#myInput").on("input", function() {
if (/^0/.test(this.value)) {
this.value = this.value.replace(/^0/, "")
}
});
Okay, so. I am making a text based game and I require a name input field. I looked at a lot of ways to do it, but couldn't understand most of them, or they were such workarounds that I couldn't justify making such messy code. This is what I have for my current script.
function handler(event:KeyboardEvent)
{
if(event.charCode == 13)
{
Input.toString()
myText = Input.text
trace(myText)
}
}
Sorry I don't know how to make those fancy blocks I see all over this site. =S
All I need it to do is take the input text from a field and assign a string to that text when the enter key is pressed.
Okay. The code works. However, since Enter is the key I press to submit the inout, it adds a second blank line. And everytime I type something new, it adds it to the string.
I.E. Say I go and type my name as "Will" And then press enter. It outputs:
\rWill
\r
If I type something new, like "Bill" it outputs:
Will
Bill
\r
\r
And the blank just gets bigger because it keeps creating new lines.
Here is the fiddle.
http://jsfiddle.net/abhishekxi/KXyLZ/
/*check out the two keydown event handler function in the fiddle */
Type in text. Press enter. Your input goes into a String. Type text. Don't press enter. You have your old text. Press enter again. New text will be there in your String.
Hope this helps.
Add this in the conditional:
function handler(event:KeyboardEvent)
{
if(event.charCode == 13)
{
if (event.preventDefault)
{
event.preventDefault();
}
Input.toString()
myText = Input.text
trace(myText)
}
}
This will verify browser support and cancel whatever would happen when pressing Enter otherwise.
Is there a possiblity to force an iOS-device to show the numeric keyboard while using a custom pattern as input type?
my input pattern:
<input id="price" class="numeric" pattern="\d+((\.|,)\d{1,2})?" name="price"
title="" data-mini="true" data-clear-btn="true" autocomplete="off" autofocus />
I want to type a currency value like '14.99' and show up a keyboard with access to numbers on the iOS device
<input type='number' />
<input pattern='[0-9]*' />
<input pattern='[\d]*' />
are all missing the decimal sign and/or are not validating as number when adding a decimal sign. An alternative way could be a javascript function which is creating the decimal sign on the right place, like pressing 1->2->9->9 in this order creates on keypress() 0.01->0.12->1.29->12.99,
but this requires the input field to be type='text' --> obvious problem here is that the text keyboard is showed when focussing the input field.
How can I solve this issue?
EDIT
Environment:
JQM 1.3.2
jquery 1.8.2
For now, JavaScript is the only solution. Here's the simplest way to do it (using jQuery):
HTML
<input type="text">
JavaScript
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.
It looks like Mobile Safari supports the new HTML5 input type attributes of email, number, search, tel, and url. These will switch the keyboard that is displayed. See the type attribute.
So for example, you could do this:
<input type="number" />
And when the input box has focus, the number keyboard is shown (as if the user had the full keyboard and hit the "123" button.
If you really only want numbers, you could specify:
<input type="tel" />
And then the user would get the phone number dialing keypad.
I know this works with Mobile Safari -- I only assume it will work with UIWebView.
http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/
I made this little snippet to achieve what you want and I've tested it on iPhone 5 v7.0.3
I used e.which to read CharCode entered and then push it into an array (before) which represents digits before decimal mark and another array (after) to move values from (before) array past the decimal mark.
It might look complicated, due to my humble programming skills.
1) Code demo - 2) Currency conversion demo
HTML:
<input type="tel" id="number" />
JS
Variables and functions:
// declare variables
var i = 0,
before = [],
after = [],
value = [],
number = '';
// reset all values
function resetVal() {
i = 0;
before = [];
after = [];
value = [];
number = '';
$("#number").val("");
$(".amount").html("");
}
// add thousand separater
function addComma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Main code:
// listen to keyup event
$("#number").on("keyup", function (e, v) {
// accept numbers only (0-9)
if ((e.which >= 48) && (e.which <= 57)) {
// convert CharCode into a number
number = String.fromCharCode(e.which);
// hide value in input
$(this).val("");
// main array which holds all numbers
value.push(number);
// array of numbers before decimal mark
before.push(value[i]);
// move numbers past decimal mark
if (i > 1) {
after.push(value[i - 2]);
before.splice(0, 1);
}
// final value
var val_final = after.join("") + "." + before.join("");
// show value separated by comma(s)
$(this).val(addComma(val_final));
// update counter
i++;
// for demo
$(".amount").html(" " + $(this).val());
} else {
// reset values
resetVal();
}
});
Reset:
// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
resetVal();
});
Result:
I think that you can use the same approach that I suggested to Ranjan.
Using a textfield like a buffer. First you need to detect when the keyboard appears and check if the first responder is the webview. Then you become a textview as the first responder.
When you are setting the text inside the input of the webview, you can add some logic to validate the number.
Here is a link of my example project with the solution, in your case you don't need change the inputView. But the approach is the same, use a Man in the middle.
Cant comment on https://stackoverflow.com/a/19998430/6437391 so posting as a separate answer...
This is the same idea as https://stackoverflow.com/a/19998430/6437391 but instead of switching the type, its the pattern that's switched.
This has the effect of not clearing the value on the textfield on focus when value does not match numeric format, for example, if the value has separators( 1,234.56 ).
$('input[type="text"]').on('touchstart', function() {
$(this).attr('pattern', '[0-9]*');
});
$('input[type="text"]').on('focus', function() {
$(this).attr('pattern', actualpattern);
});
I would like to present to the user several input text box that allows them to type a string of letters or characters that stores one letter into each box in a 'spill-over' manner. Each box is an input text type that has a limit of 1 character.
For example, the image above shows 3 input boxes (don't count the first box which shows the first letter of a word). If I type continuously a s t, 'a' should go into box2, 's' into box3 and 't' into box4. Is this possible?
At the moment, I can only manage to type one letter per box and then either have to hit the tab key or use the mouse to move the focus to the next input box on the right.
What magical CSS/HTML/Javascript would I be needing for me to complete this Quest, Sire?
Reference/Related:
http://moodurian.blogspot.com/2013/09/how-i-managed-to-allow-input-of-only-1.html
If you need a jquery solution, than you can use .keyup() event, and an if condition, which will check the length of the input filed, if it exceeds 1, it will focus the very next field.
Demo
$("input").keyup(function() {
if($(this).val().length >= 1) {
var input_flds = $(this).closest('form').find(':input');
input_flds.eq(input_flds.index(this) + 1).focus();
}
});
Make sure you also use maxlength attribute on your input fields, so that a user typing fast may not exceed the character limit.
Demo 2
As #Mr.Alien said, setting MaxLength property will safeguard the text box in having more than 1 character of text. Additionally, You should select the text in the text box while it is getting a focus. It will simplify the process if user starts from the first text box again.
$("input").keyup(function() {
var input_flds = $(this).next("input");
input_flds.select().focus();
});
DEMO It is a modified copy of #Mr.Alien demo
Update:
Implementing the above concept in a selected text box, [Concept: Set a class for the text boxes which you want to apply the need]
$("input").keyup(function() {
var input_flds = $(this).nextAll(".test:first");
input_flds.select().focus();
});
//where .test will be your class on the selected text boxes.
DEMO - 1