I use following style attribute so when i will start typing in text box suppose 'railway'then it should get enter in text box like 'RAILWAY' without pressing CapsLock
<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>
but I am not getting desired output by using this attribute
The best method would be to change the styling on your form to display uppercase:
input.normal
{
text-transform:uppercase;
}
SEE EXAMPLE
However this will not actually convert the string to uppercase, just style it to appear this way.
Therefore then when the data is submitted, use whatever server side language to convert the string to uppercase for purposes of storing in the database etc. For example with .NET you would do:
str.ToUpper();
You can accomplish this using CSS, if you only care about stylistic aspect:
.normal { text-transform: uppercase; }
If you need the text itself to be in all-caps (which is probably what you meant, sorry), combine with a bit of jQuery (it can be done without jQuery, too, but what's the point in that?):
$('.normal').change(function() {
$(this).val($(this).val().toUpperCase());
});
Example: http://jsfiddle.net/HackedByChinese/QwSSe/1/
You need to put your text transform in your Input tag, not your Image tag. Like this.
<input type = "text" class = "normal" name = "Name" style="text-transform:uppercase;" size = "20" maxlength = "20">
<img src="../images/tickmark.gif" border="0"/>
Related
I want to display an input type hour from 08:00 to 20:00. I tried this:
<input type="time" id="timeAppointment" name = "timeAppointment" min="08:00" max="20:00" placeholder="hour" required/>
But when I display it I can still select any time, it does not restrict me as I indicate. What is the problem? If is necessary some code I work with Javascript.
The constraints within the input do not prevent from entering an incorrect value in this case. Here is an overview of what MDN says in their documentation:
By default, does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value.
But you can write validations with JavaScript, or visual validations with CSS, like so:
.container{
display:flex;
align-items:center;
gap:1rem;
}
input:invalid+span:after {
content: '✖';
}
input:valid+span:after {
content: '✓';
}
<div class = "container">
<input type="time" id="timeAppointment" name = "timeAppointment" value="08:00" min="08:00" max="20:00" placeholder="hour" required/>
<span class="validity"></span>
</div>
Setting min and max properties in input tags do not inherently prevent you from accepting out of range values as inputs, but it controls the valid property of the tag, which can then be used such as in css to style your page accordingly. Some browsers do make it so that you cannot input out of the specified range, but it is not platform-independent behaviour.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#setting_maximum_and_minimum_times
If you want to ensure that only the time between min and max are input, you could programmatically implement that using an onchange listener on your input element as follows:
Make sure to indicate to the user why their input is not changing (because it is not between min and max) using css and text, etc.
const timeInput = document.getElementById("timeAppointment");
timeInput.value = '15:56';
let previousValue = timeInput.value;
timeInput.onchange = () => {
console.log(previousValue)
console.log(timeInput.value)
if (timeInput.value < timeInput.min || timeInput.value > timeInput.max) {
timeInput.value = previousValue;
}
previousValue = timeInput.value;
}
<input type="time" id="timeAppointment" name="timeAppointment" min="08:00" max="20:00" required/>
However, there is a caveat to this. Imagine you are changing your time from 02:00PM to 11:00AM. You would go from left to right, and as soon as you change 02 hours to 11 hours, the javascript validation fails as it becomes 11:00PM and the value is not able to update.
Either you will have to write a convoluted way to get around all the edge cases, or the users will have to find a weird way to change their time. This is why this is generally a bad idea to validate on every input like this, and instead you can validate it when you submit the form, or onfocusout and let the user know by appropriate styling.
how to highlight only the words which are invalid in input given by a user where i can make my custom invalid check function.
e.g
hello this is very good and very nice.
suppose this is the input by the user and suppose i want to highlight "very" and "this" or any other custom word.
I have tried putting html tag inside value but html does not parses inside value attribute of input tag.
Try using variable.split() in reading the input. Store it in array using loop and check for errors and highlight
You cannot simply put html tags in input. To enable "rich text" capabilities, you'll have to use the contenteditable HTML attribute, like so...
const words = [/(very)/gi, /(nice)/gi]
const highlightInput = () => {
const richInput = document.getElementById('rich-input')
let text = richInput.innerText
words.forEach(x => {
text = text.replace(x, '<span class="highlighted">$1</span>')
})
richInput.innerHTML = text
}
document.getElementById('highlight').addEventListener('click', highlightInput)
#rich-input{
border:1px solid #000;
padding: 5px;
}
.highlighted{
color:red;
text-decoration:underline;
}
<div>
<input type="button" value="Highlight!" id="highlight" />
</div>
<label>Enter your text below:</label>
<div id="rich-input" contenteditable="true">Hello this is very good and very nice</div>
Is it possible to style the value in the attribute ngModel of an input tag?
Example:
<input class="input" type="text" [(ngModel)] = "myService.text">
Let's say the value of text is '28 packages', can I put 28 in bold?
So if i understand correctly you want to have it bold whenever the value is 28 ?
yes its possible you can use a ng-class with a ternary expression like this
.bold{
font-weight:600;
}
<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />
This is not angular-related rather a CSS related question.
You cannot style only a part of an input in HTML/CSS so you won't be able to do it in angular.
Instead, you can use an input that is hidden behind a div. The idea is that when the user clicks the div, you actually focus the input. When the user types text, you capture the content of the input and fill the div with it, eventually adding <span class"highlight"> around the number of packages.
I prepared you a stackblitz in pure CSS/JS. You can adapt it in angular if you want.
Relevant pieces of code :
HTML :
<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>
<div>
<label for="in">The real input</label>
<input id="in" type="text">
</div>
JS :
const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')
function onInputChanged() {
let text = input.value
const regex = new RegExp('(\\d+) packages')
let result = regex.exec(text)
if(result) {
hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
} else {
hiddenSpan.innerHTML = text
}
}
// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)
// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
input.focus()
})
CSS :
#hiddenSpan {
background-color: pink;
}
.highlight {
font-weight: bold;
background-color: greenyellow;
}
Note : the downside is that the blinking caret is not visible anymore. You can take a look at this resource if you want to simulate one.
It is not possible to style certain parts of a text <input> field in bold. However, you can use a contenteditable div instead of a text <input> field. Inside the contenteditable div you can have other HTML tags like <strong> to style certain parts of the text however you like.
I created an Angular directive called contenteditableModel (check out the StackBlitz demo here) and you can use it to perform 2-way binding on a contenteditable element like this:
<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>
The directive uses regular expressions to automatically check for numbers in the inputted text, and surrounds them in a <strong> tag to make them bold. For example, if you input "28 packages", the innerHTML of the div will be formatted like this (to make "28" bolded):
<strong>28</strong> packages
This is the code used in the directive to perform the formatting:
var inputElement = this.elementRef.nativeElement;
inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>");
this.change.emit(inputElement.textContent);
You can change the <strong> tag to something else (e.g. <span style="text-decoration: underline"> if you want the text to be underlined instead of bolded).
When performing the formatting, there is an issue where the user's text cursor position will be unexpectedly reset back to the beginning of the contenteditable div. To fix this, I used 2 functions (getOriginalCaretPosition and restoreCaretPosition) to store the user's original cursor position and then restore the position back after the text formatting is performed. These 2 functions are kind of complex and they're not entirely relevant to the OP's question so I will not go into much detail about them here. You can PM me if you want to learn more about them.
I have a text box which I would like to include a £ sign whenever the user begins to type in a number.
For example: £32
How would I do this:
#Html.TextBox("amountFrom", "", new { #class = "form-control", #placeholder = "£" })
At the moment I just have a placeholder which puts a '£' sign in until the user types in an number. I would like the sign to appear immediately after the user starts typing.
A quick and dirty fix would be to use JavaScript or jQuery. When the text box changes, a £ is added to the front of whatever is already in the text box.
#Html.TextBox("amountFrom", "", new { #class = "form-control", #id="price" })
<script>
$(function() {
$('#price').on('input',function() {
var price = $('#price').val();
if (price.substring(0, 1) == '£')
{
price = price.substring(2);
}
$('#price').val('£ ' + price);
});
});
</script>
See this fiddle here : http://jsfiddle.net/49gdh95z/
A slightly better solution might be to use CSS that shows a background image of a pound sign, like StackOverflow uses to show a magnifying glass image on it's search box.
A fiddle for this example can be found here : http://jsfiddle.net/7pjm9v66/
Note that this second example adds the pound sign immediately after something is typed into the input box (and doesn't display beforehand). If you wanted to have the pound sign always display, then you can of course omit the JavaScript and move the CSS it applies directly to the #price element in the CSS.
What's the regex which allows me to select all the attribute names from <form> and <input> tags but not from any other HTML tag?
For example:
<!-- all attribute names get selected -->
<input class="something" id="yes" type="text" name="my-field" value="Hello, world!">
<!-- class and id don't get selected because it's a div -->
<div class="something" id="no"></div>
<!-- class gets selected -->
<form class="my-form"></form>
I'm only after the attribute names
Such a regexp would be very complicated to build. Despite the fact that you can't match all HTML by regexes, it would need a very complicated lookbehind to check whether the attribute name which you want to match comes after a opening tag whose name is either "form" or "input". Don't try to build such a regex, you'd go crazy and/or end up with an unreadable, non-maintainable or -undestandable monster.
Instead, use a DOM parser (there will be one for your language) and apply DOM selectors and get the attribute names of the elements.
It is not easy task to do it with regex and actually it is not a good idea to do it with regex. But it is possible >>
input = '...';
var tmp = input, found, params = [];
var re = /(<(?:form|input)\b.*?\s)([\w\-]+)=(['"]).*?\3/gi;
do {
found = 0;
tmp = tmp.replace(re, function($0,$1,$2,$3) {
params.push($2);
found = 1;
return $1;
});
} while (found);
Check this demo.