$(document).ready(function() {
$("textarea").on('keydown keypress keyup', function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
return true;
}
var maxRowCount = $(this).attr("rows") || 4;
var lineCount = $(this).val().split('\n').length;
if (e.keyCode == 13) {
if (lineCount == maxRowCount) {
return false;
}
}
var jsElement = $(this)[0];
if (jsElement.clientHeight < jsElement.scrollHeight) {
var text = $(this).val();
text = text.slice(0, -1);
$(this).val(text);
return false;
}
});
});
h1 { color:#fff;}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea rows="5" cols="50"></textarea>
In the above code, I am able to enter only 5 times, then after that it shows an error message. It means no extra row add on enter and not to set character limit. if textarea field with text and tried to enter character 2nd or 3rd line thenor last line then it remove character automatically
Related
How would I limit number of characters in input where jquery keypad is used?
HTML
<input id="num-input" type="text" maxlength="3" disabled>
JQUERY
var $numInput;
$(function() {
initKeyboard($('#numeric-keyboard'), $('#num-input'));
$('#num-input').on('keydown', function(e) {
$('#event').text('key: '+e.keyCode);
});
$('#back').on('click', onBackBtn);
$('#forward').on('click', onForwardBtn);
});
function onBackBtn() {
$('input').first().focus();
}
function onForwardBtn() {
$('input').last().focus();
}
function initKeyboard($keyboard, $input) {
$numInput = $input;
$keyboard.on('click', '.key', onKeyPress);
}
function onKeyPress(e) {
var keyValue = $(this).text();
if(keyValue.toLowerCase() === 'delete') {
keyValue = 8;
} else if(keyValue === '') {
return;
} else {
keyValue = keyValue.charCodeAt(0);
}
var e = $.Event("keydown");
e.which = keyValue;
e.keyCode = keyValue;
$numInput.trigger(e);
if(keyValue !== 8) {
$numInput.val( $numInput.val() + $(this).text() );
} else {
$numInput.val( $numInput.val().slice(0, -1) );
}
}
maxlenght is ignorred, I attempted to add if clause to $numInput.val( $numInput.val() + $(this).text() ); this part of the code with var max=3; but again no luck.
I have also tried with out of this code script to limit number of characters for that input but again jquery overtakes it and keep adding characters.
I need t set limit of 3 characters to it.
Any idea?
#num-input is disabled, maybe maxlength need to be set in #numeric-keyboard field?
i got a problem when i was making to capitalize dynamically. In my code i can capitalize any letters but it is not dynamic,the program should guess which letter should it capitalize.For example some text comes from JSON and there should be some comparing that checks texts letters and users inputed letters and then he should guess which letter he must capitalize. if there is some solution for this, please tell me. here is my code :
index.html
<textarea id="fieldId" class="textarea" style="resize: none" cols="30" row="2" ui-mask="{{typetext}}" ng-model="model" data-ng-trim="fasle" ng-trim="false" ng-focus="expression">
</textarea>
scipt.js, thats what i was trying to do.
link: function(scope, iElement, iAttrs, controller) {
controller.$parsers.push(function(inputValue) {
var transformedInput = '';
if (inputValue) {
for (var i = 0; i < inputValue.length; i++) {
if (i === 0 || i === 5) {
transformedInput += inputValue.charAt(i).toUpperCase();
} else {
transformedInput += inputValue.charAt(i).toLowerCase();
}
}
}
if (transformedInput != inputValue) {
controller.$setViewValue(transformedInput);
controller.$render();
}
return transformedInput;
});
})
and controller
app.controller('myController', ['$scope', '$document', function($scope, $document) {
$scope.typetext = "Some Text";
$document.on('keydown', function(e) {
if (e.which === 8 && e.target.nodeName !== "INPUT") {
e.preventDefault();
}
});
}])
how to write code for shortcut key html5 like below image link.
http://screencast.com/t/iHOJqwy9
Seems a duplicate question but few possible solutions are:
How to detect Ctrl+V, Ctrl+C using JavaScript?
$(document).ready(function()
{
var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67;
$(document).keydown(function(e)
{
if (e.keyCode == ctrlKey) ctrlDown = true;
}).keyup(function(e)
{
if (e.keyCode == ctrlKey) ctrlDown = false;
});
$(".no-copy-paste").keydown(function(e)
{
if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false;
});
});
$(document).bind('keydown', 'ctrl+c', function(event){
$.fancybox.close(); // if this is commented out, CTRL-C works just fine
return true;
});
$(document).keydown(function(e) {
if (e.keyCode == 67 && e.ctrlKey) {
/* do your stuff */
$("#test").text("copied!"); /* optional */
}
});
jquery hotkeys and CTRL-C
I have a number input text box and I want to allow the user to edit but do not want to allow the user to enter any other text except numbers. I want them only to be able to use the arrows on the number input box.
<input type = "number" min="0" max="10" step="0.5" input id="rating" name = "rating" class = "login-input" placeholder = "Rating 1-5:" value="0">
You can achieve this by pure JavaScript. Create this function that you can reuse in your script.
function allowNumbersOnly(e) {
var code = (e.which) ? e.which : e.keyCode;
if (code > 31 && (code < 48 || code > 57)) {
e.preventDefault();
}
}
You may preferably call this onkeypress event handler.
<input type="text" id="onlyNumbers" onkeypress="allowNumbersOnly(event)" />
function allowNumbersOnly(e) {
var code = (e.which) ? e.which : e.keyCode;
if (code > 31 && (code < 48 || code > 57)) {
e.preventDefault();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Try editing in me:
<input type="text" id="onlyNumbers" onkeypress="allowNumbersOnly(event)" />
</body>
</html>
However, I would recommend the unobtrusive style of writing JS using because it is good to keep the HTML semantic and away from pollution. You can execute the function on event handler that we would attach to this text box using vanilla JavaScript or jQuery.
function allowNumbersOnly(e) {
var code = (e.which) ? e.which : e.keyCode;
if (code > 31 && (code < 48 || code > 57)) {
e.preventDefault();
}
}
// using classic addEventListener method:
document.getElementById('onlyNumbers').addEventListener('keypress', function(e){ allowNumbersOnly(e);
}, false);
//using jQuery
$(function(){
$('#onlyNumbers2').keypress(function(e) {
allowNumbersOnly(e);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div>
Using addEventListener: <input type="text" id="onlyNumbers" />
</div>
<div>
Using jQuery: <input type="text" id="onlyNumbers2" />
</div>
</body>
</html>
To restrict every character you can just simply use e.preventDefault().
Besides, you can also use return false instead but preventDefault() is better in this case and return false should be chosen wisely. It is good to know the difference between both of them.
document.getElementById('rating').onkeypress = function() { return false; }
This will prevent the default behavior of keypresses on that element i.e. text showing up.
HTML
<input type="text" class="IntOnly">
Javascript
let ele = document.getElementsByClassName('IntOnly');
for (const e of ele) {
//e.addEventListener('change', filterNonIntOut.bind(null, e));
//e.addEventListener('paste', filterNonIntOut.bind(null, e));
e.addEventListener('input', filterNonIntOut.bind(null, e));
}
function filterNonIntOut(theTextbox) {
//console.log(ele);
let startPos = theTextbox.selectionStart;
let endPos = theTextbox.selectionEnd;
let str = theTextbox.value;
str = str.trim();
if (str == '') {
theTextbox.value = '';
return;
}
let result = "";
for (var i = 0; i < str.length; i++) {
let ch = str.charAt(i);
//console.log(ch);
if (ch === '1'
|| ch === '2'
|| ch === '3'
|| ch === '4'
|| ch === '5'
|| ch === '6'
|| ch === '7'
|| ch === '8'
|| ch === '9'
|| ch === '0'
) {
result += ch;
}
else {
startPos -= 1;
endPos -= 1;
}
}
theTextbox.value = result;
theTextbox.focus();
theTextbox.setSelectionRange(startPos, endPos);
}
Whilst in a html textarea input, I want the tab keyboard button to act like a Word processor-style indentation key rather than skipping to the next element.
How can this be done?
google is your friend! link
function insertTab(o, e)
{
var kC = e.keyCode ? e.keyCode : e.charCode ? e.charCode : e.which;
if (kC == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey)
{
var oS = o.scrollTop;
if (o.setSelectionRange)
{
var sS = o.selectionStart;
var sE = o.selectionEnd;
o.value = o.value.substring(0, sS) + "\t" + o.value.substr(sE);
o.setSelectionRange(sS + 1, sS + 1);
o.focus();
}
else if (o.createTextRange)
{
document.selection.createRange().text = "\t";
e.returnValue = false;
}
o.scrollTop = oS;
if (e.preventDefault)
{
e.preventDefault();
}
return false;
}
return true;
}
<textarea onkeydown="insertTab(this, event);"></textarea>