I am looking for a way to 'fix' a dollar symbol $ to a text input box eg <input type="text" value="$" /> but make it not possible for the default value to be removed, so that whatever the user inputs, there is always a $ symbol 'prepending' input.
Cheers
There is the possibility of a background-image but it's difficult to maintain, and doesn't react to font size changes, which makes it the less optimal choice IMO.
A better way in my opionion would be:
Put a <span>$</span> next to the input (before it, actually).
give it position: relative; left: 20px.
The $ sign then moves into the input field.
Then, give the input field padding-left: 24px.
Voilá! The $ sign is in the input field, does not obscure anything, and cannot be removed.
Expanding on Pekka's answer, I used this on my page, but I automated it a little bit with jQuery. So for this example, all of the input fields that I want to put a $ symbol in, I give them a class of "cost".
CSS:
<style type="text/css" media="screen">
.cost{
position: relative;
left: 20px;
}
input.cost{
padding-left: 24px;
}
</style>
jQuery:
<script type="text/javascript">
$(document).ready(function(){
$("#lcce form input.cost").wrap('<div class="cost">');
$("#lcce form input.cost").before('<span class="cost"></span>');
});
</script/>
This will place the span with a class of "cost" right before your input, and also wrap a div around both the input, and the span, so they are ensured to be on the same line.
If you don't have jQuery, you can get it from: jQuery.com
Now I've got a quick question - I noticed that with this styling, in IE6,7, and 8, the $ symbol is not lined up correctly. Does anybody out there have a fix for this?
Thank you!
Is this as a visual effect only? If yes you could apply that with CSS as a background image on the input.
Afterwards, on the server, you can do whatever you want with the value (e.g prepend it with $).
I too have been looking at different solutions for this. Using css to indent the text with padding and putting a background image in that position is your best bet.
I did it like this:
$('#price').keypress(function(event) {
var code = (event.keyCode ? event.keyCode : event.which);
if ($(this).val().indexOf('$') === -1){
document.getElementById("price").value = "$" + $(this).val();
} else {
document.getElementById("price").value = $(this).val();
}
});
with <input type="text" id="price">.
User can remove the dollar sign manually though if he/she wants to.
Related
jsFiddle
Above's the jsFiddle of my code.
NOTE: CSS is correct, no fiddling required with that.
As you may be looking at result, there's a plus ( + ) sign in front of some addresses. When you click the topmost cell with plus sign, you see landmark text. But when you click the rest, it doesn't work.
Here's the JQuery I used:
$('#landmark').click(function () {
$(this).next('#theLandmark').slideToggle();
});
Where #landmark is the plus (+) sign and the rest of the landmark text is #theLandmark.
The HTML/CSS/jQuery is working fine, as it works with the first time.
But I feel there's some more code of jQuery missing which can correct it.
Thanks!
The issue is because you have duplicated both the landmark and theLandmark id attributes amongst your elements. id must be unique within the page. If you convert them to class attributes your code works fine:
$('.landmark').click(function () {
$(this).next('.theLandmark').slideToggle();
});
<!-- one example instance... -->
<div class='landmark'>+</div>)
<div class='theLandmark hide'><b id='lmText'>Landmark: </b>Dharmkata</div>
.landmark {
cursor: pointer;
display: inline-block;
}
.theLandmark {
font-size: 12px;
}
Updated fiddle
Note that #lmtext is also repeated, although that element is not affected by your JS code. You should change that to a class too.
I'm doing a fancy comment list on my project, structured like this:
As you see, there's a comments list and at his bottom there's an input field (textarea) to submit a comment. Note that there's the current username attached to the right (let's call it a simple static appended text).
I just found this little JS to make an input field resize automatically by adapting it to the content.
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]').keyup(resizeInput).each(resizeInput);
But it's not enough. I need it for a textarea and I want it to behave correctly when a comment is long enough to wrap on another line. By definition, the input field is a box, and it obviously acts badly compared to what I want:
Instead, this should be the right behavior:
I looked everywhere and I can't think any way to implement this. Can somebody help me?
Here is a good plugin for textarea. But it using jQuery.
usage simple as always.
$(document).ready(function(){
$('textarea').autosize();
});
You could use the contenteditable attribute:
<span contenteditable="true">comment</span> by <span class="userName">someone</span>
It is supported in practically all browsers. Using the right CSS, you can underline the content and also limit the width.
I think you mean this
NOTE: No check for selection and bound to document. Exercise for the reader to bind to a specific field and swap it for a span
FiDDLE
$(document).keypress(function(e) {
var char = String.fromCharCode(e.which);
if (e.which==13) char = '<br/>'; // needs to handle backspace etc.
$("#textfield").append(char);
$("#hiddenfield").val($("#textfield").text()); // or .html if you want the BRs
e.preventDefault();
});
using
<span id="textfield"></span> - by My Username
If you make the field contenteditable you will get this in Chrome so some additional CSS may be needed
Use a <span> with contenteditable (supported in IE too). Here is a fiddle: http://jsfiddle.net/goabqjLn/2/
<span contenteditable>Insert a comment...</span> by My Username
Then, using JavaScript, attach an event listener that mirrors the inner text of the span into a hidden input field, so it gets submitted with your <form>.
Edit: I have updated the fiddle to also include the JS code. Here is the updated code:
<span class="editor" id="editor" contenteditable data-placeholder="Insert a comment...">Insert a comment...</span> by My Username
<!-- Hide this textarea in production: -->
<textarea type="text" id="comment"></textarea>
And the JS:
function mirror() {
var text = $('#editor').html().trim()
.replace(' ', ' ')
.replace(/<br(\s*)\/*>/ig, '\n') // replace single line-breaks
.replace(/<[p|div]\s/ig, '\n$0') // add a line break before all div and p tags
.replace(/(<([^>]+)>)/ig, ""); // remove any remaining tags
$('#comment').val(text);
}
$('#editor').focus(function () {
var editor = $(this);
if (editor.text() == editor.attr('data-placeholder')) {
editor.text('');
}
}).blur(function () {
var editor = $(this);
if (editor.text() == editor.attr('data-placeholder')) {
editor.text(editor.attr('data-placeholder'));
}
}).blur(mirror).keyup(mirror);
Good day,
I would like to make a text box in my jsp to become readonly and its background color to grey like disable in Jquery. The following is my code :
if(a)
$('#billAccountNumber').attr('readonly', 'true');
I not prefer using attr('disable', 'true');, because the value will become null when I submit form. Any ideas instead of write second line of code to change the style?
there are 2 solutions:
visit this jsfiddle
in your css you can add this:
.input-disabled{background-color:#EBEBE4;border:1px solid #ABADB3;padding:2px 1px;}
in your js do something like this:
$('#test').attr('readonly', true);
$('#test').addClass('input-disabled');
Hope this help.
Another way is using hidden input field as mentioned by some of the comments. However bear in mind that, in the backend code, you need to make sure you validate this newly hidden input at correct scenario. Hence I'm not recommend this way as it will create more bugs if its not handle properly.
As per you question this is what you can do
HTML
<textarea id='sample'>Area adskds;das;dsald da'adslda'daladhkdslasdljads</textarea>
JS/Jquery
$(function () {
$('#sample').attr('readonly', 'true'); // mark it as read only
$('#sample').css('background-color' , '#DEDEDE'); // change the background color
});
or add a class in you css with the required styling
$('#sample').addClass('yourclass');
DEMO
Let me know if the requirement was different
If supported by your browser, you may use CSS3 :read-only selector:
input[type="text"]:read-only {
cursor: normal;
background-color: #f8f8f8;
color: #999;
}
Why don't you place the account number in a div. Style it as you please and then have a hidden input in the form that also contains the account number. Then when the form gets submitted, the value should come through and not be null.
Can add disable like below and can get data on submit. something like this ..
DEMO
Html
<input type="hidden" name="email" value="email" />
<input type="text" id="dis" class="disable" value="email" name="email" >
JS
$("#dis").attr('disabled','disabled');
CSS
.disable { opacity : .35; background-color:lightgray; border:1px solid gray;}
In Google plus (and a lot of other places), when I want to post something, when I type it in Persian, which is a right-to-left language, text direction is automatically set to rtl and text-alignment:right, and when I start to type in English it changes automatically to ltr and text-alignment:left. How can I have such functionality? Is this anything with HTML5 or Javascript? What clues should I follow?
Thanks in advance
Add dir=auto to your input elements:
Use dir="auto" on forms and inserted text in order to automatically detect the direction of content supplied at run-time.
https://www.w3.org/International/questions/qa-html-dir#quickanswer
I wrote a JQuery code to do this. Just add class "checkRTL" to the element you want to set its direction.
var rtlChar = /[\u0590-\u083F]|[\u08A0-\u08FF]|[\uFB1D-\uFDFF]|[\uFE70-\uFEFF]/mg;
$(document).ready(function(){
$('.checkRTL').keyup(function(){
var isRTL = this.value.match(rtlChar);
if(isRTL !== null) {
this.style.direction = 'rtl';
}
else {
this.style.direction = 'ltr';
}
});
});
I was having issue with dir=auto sometimes not working.
After digging CSS I found
#container > * {
text-align: start;
unicode-bidi: plaintext;
}
More flexible and universal
There's also Twitter's library, which may help:
https://github.com/twitter/RTLtextarea
Add dir="auto" to your element and then use window.getComputedStyle(element).getPropertyValue('direction')
Example:
<div id="foo" dir="auto">نے والے ہیں۔<div>
// returns rtl
window.getComputedStyle(document.getElementById('foo')).getPropertyValue('direction')
list the right to left languages typical characters
detect them on the fly (usual js events)
change css classes accordingly
Or follow this link:
http://www.i18nguy.com/temp/rtl.html
window.getComputedStyle(document.getElementById('foo')).getPropertyValue('direction')
<div class="" id="foo">
<div class="English">this is test message</div>
<div class="Persian">این یک پیام تستی است</div>
<div class="Persian-English">test برای حالت فارسی</div>
</div>
In Persian, if first sentence starts with an English word like last div, the whole text is placed in LTR mode
I want to display prices followed by a $ sign in a different color in the heading. I don't want to display all numbers in different color - just where $ sign appears and the digits after that. There could be up to two numbers after the decimal point in some cases e.g. where price is $12.50
I have access to both HTML and CSS on the server.
Please see below code that is used to display heading. Please let me know how I change this code.
{$title_short}
Thanks for your help in advance in solving this.
Example:
If you have access to the HTML, you can simply wrap all the prices in a span tag and assign some class to them. Then just use CSS to set the color:
<span class="price">$12.34</span>
Why not just add a span like:
css:
span.money{
color: red;
}
html:
$<span class="money">12.50</span>
If I understand correctly, this should do the trick if you use jQuery
$('element:contains("$")').css('color', 'whatever color you'd like');
Example
$('table th:contains("$")').css('color', 'yellow');
Assuming , you the values are in a tag (or any selectable node) , you can replace them back with a regex . Something like
$('p:contains("$")').html(function(i,html){
return html.replace(/(\$\d+(\.\d+)?)/g,function($1){
return '<em class="money">'+$1+'</em>';
});
});
Here's a quick demo .
http://jsfiddle.net/ngcBg/