How can I make a text box that allows users to enter tabs, and does not send the user to the next element when the tab button is pressed?
You only need to check for tabs onkeydown via event.keyCode === 9. Inserting the character into the textarea is non-trivial - use a library or google for 'insertatcaret'.
There are already some plug-ins for jQuery that do this. One for example is Tabby.
<textarea onkeydown="return catchTab(this, event);">
JS code:
function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function replaceSelection (input, replaceString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
if (selectionStart != selectionEnd){
setSelectionRange(input, selectionStart, selectionStart + replaceString.length);
} else{
setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
}
} else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = replaceString;
if (!isCollapsed) {
range.moveStart('character', -replaceString.length);
range.select();
}
}
}
}
function catchTab(item,e){
if(navigator.userAgent.match("Gecko")){
c=e.which;
} else{
c=e.keyCode;
}
if(c==9){
replaceSelection(item, "\t");
setTimeout(function() { item.focus() } , 0);
return false;
}
}
You can use JavaScript to catch the tab keypress event and replace it with spaces (I'm not sure about inserting tabs into a textarea).
E: This page looks good.
onkeypress, onkeyup or onkeydown check the key that was pressed and if it is a tab then append \t to the textbox and return false so that focus remains on the textbox
you will most likely have to use textranges so that tabs can be inserted anywhere not at the end of the text
that's the basic idea for the rest google is your friend :)
Do NOT try to capture the onkeypress event for the 'TAB' key in IE (it doesn't work) (bug 249)
Try onkeydown or onkeyup instead.
Related
Im trying to confirm if the password strength is strong or weak and is the password is strong and when I submit it should have alert message like "You Have Strong Password" and when its weak "Invalid Password"
This is what I am now.
function checkPasswordStrength() {
var passwordStrength = false;
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,#,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
if ($('#password').val().length < 8) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('weak-password');
$('#password-strength-status').html("Weak (should be atleast 8 characters.)");
} else {
if ($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('strong-password');
$('#password-strength-status').html("Strong");
return passwordStrength = true;
} else {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('medium-password');
$('#password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
}
}
}
$('#btn-submit').click(function () {
if (passwordStrength == false) {
alert("INVALID PASSWORD");
} else {
alert("You have Strong PASSWORD");
}
</script>
its for Educational Purpose only im just starting jquery..
thank you in advance..
You need to call the function instead of just checking your variable. So rather do
$('#btn-submit').click(function () {
if (checkPasswordStrength() === false) {
instead of
$('#btn-submit').click(function () {
if (passwordStrength == false) {
Then, instead of return passwordStrength = true; you should do just passwordStrength = true and add a return passwordStrength to the very end of your function so it will return either false or true.
It looks like the variable scope is incorrect. var passwordStrength should be put outside of the checkPasswordStrength function.
var passwordStrength
function checkPasswordStrength() {
....
Hello I have a question I want to reset button if the fields are empty, the reset is not displayed if a value is entered, the reset is displayed
Reset
for jquery ill recomand this
$( "input" ).change(function() {
var val = $(this).val();
if(val == ""){
$("#yourresetbutton").hide();
}else{
$("#yourresetbutton").show();
}
});
I'm not sure what you mean by this but I take it you want a button to appear only if a textbox if left blank. If so you this is some code you can use:
<input id='textbox' type='text'></input>
<button id='resetButton'></button>
setInterval(checkText, 10)
function checkText() {
if(document.getElementById('textbox').value == '') {
document.getElementById('resetButton').visibility = 'visible';
}
else() {
document.getElementById('resetButton').visibility = 'hidden';
}
}
I have a textarea which is restricted to input only numbers. I want to remove carriage return char after user presses enter key. Here's my code:
// Change tempo
function changeTempo(event:KeyboardEvent):void {
if (event.charCode == 13) {
// Some code here
}
// Remove enter char
removeCarriageReturnsAndNewLines(tempo_txt.text);
}
function removeCarriageReturnsAndNewLines($myString:String):String {
var newString:String;
var findCarriageReturnRegExp:RegExp = new RegExp("\r", "gi");
newString = $myString.replace(findCarriageReturnRegExp, "");
var findNewLineRegExp:RegExp = new RegExp("\n", "gi");
newString = newString.replace(findNewLineRegExp, "");
return newString;
}
I would say the easiest way is to listen to text input, something like this:
var t:TextArea = this.ta; //ta is on the timeline
t.restrict = "0-9"; //restricts the input only to numbers
t.addEventListener(TextEvent.TEXT_INPUT, onTextInput, true); //use capture phase to be able to prevent the default behavior (text input)
function onTextInput(e:TextEvent):void {
if(e.text.indexOf("\n") > -1) {
e.preventDefault(); //prevent the default behavior of the field
}
}
I cannot test this right now but I guess it should work without problems.
Many times when I am being tab to switch fields, some times it entered into a text area where pressing tab indent your text. How can I get out these textareas using keyboard so I can continue switching fields.
...here is a fiddle that does the same.
If the websites themselves are overriding this default/expected behaviour then they are breaking a standard UI feature (and possibly lessening site accessibility - although that may depend on the particular application) and it is really up to the site to implement some kind of alternative. There is no other "built-in" keyboard shortcut to move focus to the "next page element".
If, however, you just want to get focus out of that textarea, then you could perhaps use another shortcut, such as Ctrl+L which moves focus to the address bar. From their you can start TABing again to move focus.
You can use the following to do what you need:
http://postcode.cf/support-tabs-in-text-areas.html
/* Support Tabs within your textarea */
HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea
return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) { //change the caret position of the textarea
this.selectionStart = position;
this.selectionEnd = position;
this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () { //if the textarea has selection then return true
if (this.selectionStart == this.selectionEnd) {
return false;
} else {
return true;
}
};
HTMLTextAreaElement.prototype.getSelectedText = function () { //return the selection text
return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) { //change the selection area of the textarea
this.selectionStart = start;
this.selectionEnd = end;
this.focus();
};
var textarea = document.getElementsByTagName('textarea')[0];
textarea.onkeydown = function(event) {
//support tab on textarea
if (event.keyCode == 9) { //tab was pressed
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() + " ".length;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
return false;
}
if(event.keyCode == 8){ //backspace
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 37){ //left arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 39){ //right arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() + 3;
textarea.setCaretPosition(newCaretPosition);
}
}
}
function showEmp(){
if(validate())
{
for(var i=0; i < document.employee.puid.length; i++){
if(document.employee.puid[i].checked){
var emp_value = document.employee.puid[i].value;
}
}
xmlHttp=GetXmlHttpObject();
if(xmlHttp==null){
alert ("Browser does not support HTTP Request")
return
}
var url="getPatient.jsp"
url=url+"?emp_id="+emp_value;
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var showdata = xmlHttp.responseText;
alert(showdata)
var strar = trim(showdata).split(":");
if(strar.length>0)
{
window.opener.location.reload();
window.location.reload();
opener.document.getElementById("puid").value=strar[1];
opener.document.getElementById("fname").value=strar[2];
window.close();
}
}
}
i am not able to display value in the parent window fields , in this
var showdata = xmlHttp.responseText;
alert(showdata)
here even i just kept alert for showdata , but it is displaying only empty alert box can any one help me , !!
It seems that a lot of semicolons are missing ; is that some kind of "copy / paste" mistake?