/    Sign up×
Community /Pin to ProfileBookmark

help me out with this..here i want to enter only characters in the input boxes

Copy linkTweet thisAlerts:
Dec 19.2014

[code=html]
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV</title>
</head>
<body>
<div style=”width:100%”>
<div style=”background-color:silver; width:100%”>
<h1><center>skype</center></h1>
</div>
<form action=””>
<style>
input[type=”text”]{
border-radius:10px
}
button[type=”submit”]{
border-radius:10px
}
button[type=”cancel”]{
border-radius:10px
}
</style>
<div style=”background-color:silver; height:400px;width:620px;float:left;”>
<table border=”1″height=”400px” width=”620px”>
<tr>
<td height=”10%”><center><b>PERSONAL DETAILS</b></center></td>
</tr>
<tr>
<td height=”50%”cellpadding=”5px”>
<table>
<tr>
<td> *FIRST NAME: </td>
<td><input type=”text”name=”FIRST NAME”maxlength=”5″></td>
</tr>
<tr>
<td> *LAST NAME: </td>
<td><input type=”text”name=”LAST NAME”maxlength=”5″></td>
</tr>
<tr>
<td> *D.O.B: </td>
<td><input type=”text”name=”D.O.B”maxlength=”5″></td>
</tr>
<tr>
<td> *EMAIL: </td>
<td><input type=”text”name=”EMAIL”maxlength=”5″></td>
</tr>
<tr>
<td> *SEX: </td>
<td><input type=”checkbox”name=”SEX”>MALE<input type=”checkbox”name=”SEX”>FEMALE</td>
</tr>
<tr>
<td> *CITY: </td>
<td><input type=”text”name=”CITY”maxlength=”5″</td>
</tr>
<tr>
<td> *COUNTRY: </td>
<td><input type=”text”name=”COUNTRY”maxlength=”5″></td>
</tr>
<tr>
<td> *CONTACT: </td>
<td><input type=”text”name=”CONTACT”maxlength=”5″></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div style=”background-color:white; height:400px;width:20px;float:left;”>
<p></p>
</div>
<div style=”background-color:silver; height:400px;width:620px;float:right;”>
<table border=”1″height=”400px”width=”620px”>
<tr>
<td height=”10%”><center><b>REGISTRATION DETAILS</b></center></td>
</tr>
<tr>
<td height=”50%”>
<table>
<tr>
<td>*USERNAME:</td>
<td><input type=”text”name=”USERNAME”maxlength=”5″></td>
</tr>
<tr>
<td>*PASSWORD:</td>
<td><input type=”text”name=”pswd”maxlength=”5″></td>
</tr>
<tr>
<td>*RETYPE PASSWORD:</td>
<td><input type=”text”name=”repswd”maxlength=”5″> (passwords must match)</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div style=”background-color:white;clear:both;height:50px;”>
<p></p>
</div>
<div style=”background-color:silver;clear:both;”>
<table border=”1″ width=”100%” height=”20%”>
<tr>
<td height=”5%”colspan=”2″><center><b>TERMS & CONDITIONS</b><center/></td>
</tr>
<tr>
<td height=”15%”colspan=”2″>
<input type=”checkbox”>All the details marked with * should be filled compulsary.</br>
<input type=”checkbox”>Mail would be sent after the succesfull completetion of this form.
</td>
</tr>
</table>
</div>
</form>
<center>
<button type=”submit” value=”submit”><h1<b>submit</b></h1></button>
<button type=”cancel” value=”cancel”><h1<b>cancel</b></h1></button>
</center>
</div>
</body>
</html>
[/code]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KiethHoytDec 22.2014 — I found what you needed on Stackoverflow. I am not the best in recreating scripts for people, but the script shown will help you get to where you need to be.

Only Allow Alphabet
Copy linkTweet thisAlerts:
@thaonvpJan 15.2015 — JavaScript to limit form field input text only allow alphabet to specific characters. Goodluck
Copy linkTweet thisAlerts:
@PadonakJan 15.2015 — <i>
</i>&lt;script&gt;
onload=function(){
var inps=document.querySelectorAll('input[type="text"]'),
notallowed=/[^A-Za-z]/ig;
for(var k=0; k&lt;inps.length; k++){
inps[k].onkeyup=inps[k].onblur=function(){
var val=this.value;
if(val){
this.value=val.replace(notallowed,'');
}
}
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
Copy linkTweet thisAlerts:
@rootJan 15.2015 — have you tried adding the tag pattern="[a-zA-Z]" to the <input>

[code=html]<input type="text" name="FIRST NAME" maxlength="15" pattern="[a-zA-Z]{1,15}" required />[/code]

Other input features of HTML5 can be found floating around the internet.
Copy linkTweet thisAlerts:
@Troy_IIIJan 17.2015 — This is a browser backward-compatible approach which will allow: `a-zA-Z characters only.

The function code:

[CODE]
function textOnly(e){e=e||event;e=e.keyCode||e.which; return ( e<65||e>90 ) + ( e<95||e>122 ) > 1 ? !1 : !0 }
[/CODE]

Use the [B]onkeypress[/B] event to filter.

For simplicity and brevity of code use:


You can attach it to the container element of your inputs, or even on document level in case there are no inputs that require numbers or other symbols restricted by this function.

e.g.:
[CODE]document.onkeypress=textOnly;[/CODE]
Copy linkTweet thisAlerts:
@rootJan 20.2015 — Hi TroyIII

Here is a thought...

Why not attach the event to the input field so that on change, the input is validated via the pattern set in the pattern field of the input, if your function could determine if HTML5 is supported, if not then your function can be fallback.

You then don't have an event firing each time a key is pressed.
Copy linkTweet thisAlerts:
@Troy_IIIJan 23.2015 — [I]>Why not attach the event to the input field?[/I]

Seems byte-code expensive; 10x addEventListener for this page only.

[I]>so that on change...?[/I]

Using the "onchange" ruins the User Experience; Seeing characters being typed in and than disappearing for no apparent reason, would feel buggy; The "onchange" event is not handled very well by Mozilla's and other NN brood, for character input. On older FX builds it simply doesn't fire.

[I]>if your function could determine if HTML5 is supported?[/I]

It could, -using this simple small and efficient [I]browser unaware[/I] ( UA sniff-free ) code:

[code=php]test = document.createElement( 'input' ); /* creating a dummy, clean property-free input element */
"pattern" in test ? /* checking if input elements support RegExp patterns */
0 : /* if true : do nothing / use the supplied pattern */
( inputsWrapper.onkeypress = textOnly ); /* otherwise use JS assistance */
delete test; /* delete reference and namespase for test element to get ready for JS automatic garbage collector */[/code]
readable code:

[INDENT]/* creating a dummy, clean property-free input element */

test = document.createElement( 'input' );

/* checking if input elements support RegExp patterns */

"pattern" in test ?

/* if true? do nothing! Use the supplied pattern */

0 :

/* otherwise, use JS assistance */

( inputsWrapper.onkeypress = textOnly );

/* delete reference and namespase for test element to get ready for JS automatic garbage collector */

delete test; [/INDENT]

[I]>You then don't have an event firing each time a key is pressed.[/I]

All events fire at all times. If not handled - they simply evaporate, so there's no difference in it. Otherwise, if a browser handles "it" properly, using the "onchange" event instead, will not lessen the number of events being fired or handled. That is: the same number of events will get fired and handled in both cases.

Regards.
×

Success!

Help @saikiran spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...