Script letters in html

JavaScript: HTML Form — checking for numbers and letters

Sometimes situations arise ( suppose a user id, password or a code) when the user should fill a single or more than one field with alphabet characters (A-Z or a-z) and numbers (0-9) in an HTML form. You can write a JavaScript form validation script to check whether the required field(s) in the HTML form contains only letters and numbers.

Javascript function to check if a field input contains letters and numbers only

// Function to check letters and numbers function alphanumeric(inputtxt) < var letterNumber = /^[0-9a-zA-Z]+$/; if((inputtxt.value.match(letterNumber)) < return true; >else < alert("message"); return false; >> 

To get a string contains only letters and numbers (i.e. a-z, A-Z or 0-9) we use a regular expression /^[0-9a-zA-Z]+$/ which allows only letters and numbers. Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document.+

Javascript code

function alphanumeric(inputtxt) < var letters = /^[0-9a-zA-Z]+$/; if(inputtxt.value.match(letters)) < alert('Your registration number have accepted : you can try another'); document.form1.text1.focus(); return true; >else < alert('Please input alphanumeric characters only'); return false; >> 

li .mail < margin: auto; padding-top: 10px; padding-bottom: 10px; width: 400px; background : #D8F1F8; border: 1px soild silver; >.mail h2 < margin-left: 38px; >input < font-size: 20pt; >input:focus, textarea:focus < background-color: lightyellow; >input submit < font-size: 12pt; >.rq

Practice the example online

Other JavaScript Validation :

• Checking for non-empty
• Checking for all letters
• Checking for all numbers
• Checking for floating numbers
• Checking for letters and numbers
• Checking string length
• Email Validation
• Date Validation
• A sample Registration Form
• Phone No. Validation
• Credit Card No. Validation
• Password Validation
• IP address Validation

Test your Programming skills with w3resource’s quiz.

Follow us on Facebook and Twitter for latest update.

JavaScript: Tips of the Day

How can I check for an empty/undefined/null string in JavaScript?

If you just want to check whether there’s any value, you can do

If you need to check specifically for an empty string over null, I would think checking against «» is your best bet, using the === operator (so that you know that it is, in fact, a string you’re comparing against).

• Weekly Trends
• Java Basic Programming Exercises
• SQL Subqueries
• Adventureworks Database Exercises
• C# Sharp Basic Exercises
• SQL COUNT() with distinct
• JavaScript String Exercises
• JavaScript HTML Form Validation
• Java Collection Exercises
• SQL COUNT() function
• SQL Inner Join
• JavaScript functions Exercises
• Python Tutorial
• Python Array Exercises
• SQL Cross Join
• C# Sharp Array Exercises

We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook

Источник

Modifying Specific Letters with CSS and JavaScript

Changing specific characters can be a challenge in CSS. Often, we’re forced to implement our desired changes one-by-one in HTML, perhaps using the span element. But, in a few specific cases, a CSS-focused solution may still be possible. In this article, we’ll start by looking at some CSS-first approaches to changing characters, before considering a scenario where we need to turn to JavaScript.

Right now, CSS doesn’t excel at targeting specific characters without making alterations to the HTML. However, there are a few scenarios where CSS could be the go-to.

The @font-face rule is regularly used to create custom fonts, but its unicode-range property can also allow us to target specific characters. For example, imagine our site often contains ampersands in its headings. Instead of using the heading font, we want something a tad more flamboyant. We can look up the unicode value of an ampersand ( U + 0026 ) and use unicode-range to target this specific character.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]'); h1, h2, h3, h4, h5, h6 < font-family: 'Ampersand', Montserrat, sans-serif; >@font-face

Jane Austen Novels
 
Pride & Prejudice
 
Sense & Sensibility

The ::first-letter pseudo-element was primarily designed with drop caps in mind and it is supported by all major browsers.

Of course, this is only useful in a relatively limited number of scenarios. There have been several calls for an ::nth-letter pseudo-element (including here on CSS-Tricks) but, right now, that’s just a pipe dream!

Using the ::after pseudo-element and content property, we can achieve a similar effect for the final character — so long as that character is always the same. For example, here’s how we could add a jazzy, italicized exclamation point after every h2 element:

Finally, there’s the font-variant-alternates property. This is only supported by Firefox, so it’s not recommended for production, but it may be worth knowing about for really specific scenarios: if a font happens to contain alternate glyphs, we can use this property with the character-variant() function to select a preferred glyph for a character of our choice.

Turning to JavaScript doesn’t need to come at a cost to performance, especially if we run HTML-altering functions at build time. The most common use case is probably to find and replace specific characters in our HTML with a span element. For simplicity’s sake, I’ll begin with an example on the client-side, and after that we’ll look into running this at build with webpack.

Find and replace at runtime

Let’s imagine that, whenever we have the text “LOGO” in a header on our site, we want to add a special style to the first “O” character only, by wrapping it in a span element with the class .special-o .

const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6"); for (const heading of headings) < heading.innerHTML = heading.innerHTML .replace(/\bLOGO\b/g, 'LOGO'); >

In the JavaScript above, we’re performing a find-and-replace on every heading tag. Our regular expression uses the metacharacter \b to ensure that LOGO is always a word — rather than an element of a larger word. For example, we don’t want to match the plural “LOGOS.” Right now, it would be impossible to do this with CSS, not least because we only want to target the first “O” in the sequence. The same principle applies if we want to replace the “O” — or even the whole word “LOGO” — with an image.

Find and replace at build

There are plenty of build tools out there, but as webpack is so popular, we’ll use that for our example — and luckily, there’s a plugin for what we need called string-replace-loader. For those new to webpack, a loader is used to preprocess files. Here, we can perform a find-and-replace on specific files as part of our build. First, we need to install the plugin:

npm install --save-dev string-replace-loader

By changing the test property value, we could target JSX, TSX, PUG, Handlebars or any other templating file format:

/\.html$/i # HTML /\.[jt]sx$/i # JSX or TSX /\.pug$/i # PUG /\.handlebars$/i # Handlebars

Finally, if you’re comfortable creating and editing fonts and would rather avoid CSS or JavaScript, a custom font could be a solution for many of the scenarios set out above. There are plenty of free font-editing tools such as Font Forge or Birdfont for those who want to try this more design-focused approach.

Источник

JavaScript: HTML Form validation — checking for all letters

Sometimes situations arise when a user should fill a single or more than one fields with alphabet characters (A-Z or a-z) in an HTML form. You can write a JavaScript form validation script to check whether the required field(s) in the HTML form contains only letters.

Javascript function to check for all letters in a field

function allLetter(inputtxt) < var letters = /^[A-Za-z]+$/; if(inputtxt.value.match(letters)) < return true; >else < alert("message"); return false; >> 

To get a string contains only letters (both uppercase or lowercase) we use a regular expression (/^[A-Za-z]+$/) which allows only letters. Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document.

JavaScript Code

function allLetter(inputtxt) < var letters = /^[A-Za-z]+$/; if(inputtxt.value.match(letters)) < alert('Your name have accepted : you can try another'); return true; >else < alert('Please input alphabet characters only'); return false; >> 

li .mail < margin: auto; padding-top: 10px; padding-bottom: 10px; width: 400px; background : #D8F1F8; border: 1px solid silver; >.mail h2 < margin-left: 38px; >input < font-size: 20pt; >input:focus, textarea:focus < background-color: lightyellow; >input submit < font-size: 12pt; >.rq

Practice the example online

Other JavaScript Validation :

• Checking for non-empty
• Checking for all letters
• Checking for all numbers
• Checking for floating numbers
• Checking for letters and numbers
• Checking string length
• Email Validation
• Date Validation
• A sample Registration Form
• Phone No. Validation
• Credit Card No. Validation
• Password Validation
• IP address Validation

Test your Programming skills with w3resource’s quiz.

Follow us on Facebook and Twitter for latest update.

JavaScript: Tips of the Day

How can I check for an empty/undefined/null string in JavaScript?

If you just want to check whether there’s any value, you can do

If you need to check specifically for an empty string over null, I would think checking against «» is your best bet, using the === operator (so that you know that it is, in fact, a string you’re comparing against).

• Weekly Trends
• Java Basic Programming Exercises
• SQL Subqueries
• Adventureworks Database Exercises
• C# Sharp Basic Exercises
• SQL COUNT() with distinct
• JavaScript String Exercises
• JavaScript HTML Form Validation
• Java Collection Exercises
• SQL COUNT() function
• SQL Inner Join
• JavaScript functions Exercises
• Python Tutorial
• Python Array Exercises
• SQL Cross Join
• C# Sharp Array Exercises

We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook

Источник

Script letters in html

Question: Can I display Greek letters on my page as part of JavaScript output?

Here is a simple test for the Greek letter pi (π): document.write('C = 2\u03C0R') // document.write('C = 2πR') // document.write('C = 2πR') // document.write(unescape('%u03C0')) // document.write(decodeURI('%CF%80')) //

To display Greek letters in a JavaScript alert message or a confirm dialog box, use hexadecimal codes, for example:

The following table lists HTML entities, character codes, and URL-encodings for Greek letters in alphabetical order. Some letter variants do not have HTML entities; for example, ϓ ( ϓ ) or ϕ ( ϕ ). These letter variants are omitted.

chr	\uXXXX	Numeric	HTML entity
Α	\u0391	Α	Α	%u0391	%CE%91
Β	\u0392	Β	Β	%u0392	%CE%92
Γ	\u0393	Γ	Γ	%u0393	%CE%93
Δ	\u0394	Δ	Δ	%u0394	%CE%94
Ε	\u0395	Ε	Ε	%u0395	%CE%95
Ζ	\u0396	Ζ	Ζ	%u0396	%CE%96
Η	\u0397	Η	Η	%u0397	%CE%97
Θ	\u0398	Θ	Θ	%u0398	%CE%98
Ι	\u0399	Ι	Ι	%u0399	%CE%99
Κ	\u039A	Κ	Κ	%u039A	%CE%9A
Λ	\u039B	Λ	Λ	%u039B	%CE%9B
Μ	\u039C	Μ	Μ	%u039C	%CE%9C
Ν	\u039D	Ν	Ν	%u039D	%CE%9D
Ξ	\u039E	Ξ	Ξ	%u039E	%CE%9E
Ο	\u039F	Ο	Ο	%u039F	%CE%9F
Π	\u03A0	Π	Π	%u03A0	%CE%A0
Ρ	\u03A1	Ρ	Ρ	%u03A1	%CE%A1
Σ	\u03A3	Σ	Σ	%u03A3	%CE%A3
Τ	\u03A4	Τ	Τ	%u03A4	%CE%A4
Υ	\u03A5	Υ	Υ	%u03A5	%CE%A5
ϒ	\u03D2	ϒ	ϒ	%u03D2	%CF%92
Φ	\u03A6	Φ	Φ	%u03A6	%CE%A6
Χ	\u03A7	Χ	Χ	%u03A7	%CE%A7
Ψ	\u03A8	Ψ	Ψ	%u03A8	%CE%A8
Ω	\u03A9	Ω	Ω	%u03A9	%CE%A9
α	\u03B1	α	α	%u03B1	%CE%B1
β	\u03B2	β	β	%u03B2	%CE%B2
γ	\u03B3	γ	γ	%u03B3	%CE%B3
δ	\u03B4	δ	δ	%u03B4	%CE%B4
ε	\u03B5	ε	ε	%u03B5	%CE%B5
ζ	\u03B6	ζ	ζ	%u03B6	%CE%B6
η	\u03B7	η	η	%u03B7	%CE%B7
θ	\u03B8	θ	θ	%u03B8	%CE%B8
ϑ	\u03D1	ϑ	ϑ	%u03D1	%CF%91
ι	\u03B9	ι	ι	%u03B9	%CE%B9
κ	\u03BA	κ	κ	%u03BA	%CE%BA
λ	\u03BB	λ	λ	%u03BB	%CE%BB
μ	\u03BC	μ	μ	%u03BC	%CE%BC
ν	\u03BD	ν	ν	%u03BD	%CE%BD
ξ	\u03BE	ξ	ξ	%u03BE	%CE%BE
ο	\u03BF	ο	ο	%u03BF	%CE%BF
π	\u03C0	π	π	%u03C0	%CF%80
ϖ	\u03D6	ϖ	ϖ	%u03D6	%CF%96
ρ	\u03C1	ρ	ρ	%u03C1	%CF%81
ς	\u03C2	ς	ς	%u03C2	%CF%82
σ	\u03C3	σ	σ	%u03C3	%CF%83
τ	\u03C4	τ	τ	%u03C4	%CF%84
υ	\u03C5	υ	υ	%u03C5	%CF%85
φ	\u03C6	φ	φ	%u03C6	%CF%86
χ	\u03C7	χ	χ	%u03C7	%CF%87
ψ	\u03C8	ψ	ψ	%u03C8	%CF%88
ω	\u03C9	ω	ω	%u03C9	%CF%89
Alphabetical order differs from the character code order for these letters:
ϑ	\u03D1	ϑ	ϑ	%u03D1	%CF%91
ϒ	\u03D2	ϒ	ϒ	%u03D2	%CF%92
ϖ	\u03D6	ϖ	ϖ	%u03D6	%CF%96

Источник