I found a way to make the placeholder attribute in IE9 but there is a little problem. As soon I click on the text box the placeholder text disappears. I wanted to have the functionality like twitter.com/signup has in IE.
Here is the code which made the Placeholder work in IE9.
http://www.cssnewbie.com/example/placeholder-support/
Related
I have to set placeholders in textareas on a form using IE9. The problem im getting is that when the page is loaded, the text from the placeholder is being writen on the textarea rather than just being showed as just a gray text that disapears when the user write something on it. BUT, if I erase the text that is automatically writen, the placeholder works normally. Is this a common error? Is there a easy way to fix this?
IE9 doesn't support placeholder attribute. See here
You will need to use JavaScript.
See here
I'm writing a single-page application that involves dragging "items" from one box into another box, and optionally sorting the items in that second box. Some of these items will consist only of static text labels, while other items will include text input boxes.
I am using jQuery UI to support the dragging/dropping/sorting, and am styling the "items" as jQuery UI buttons. The demo fiddle is at:
http://jsbin.com/oxotep/3/edit
This works great in WebKit-based browsers and Firefox, but doesn't work right in Internet Explorer (even IE 10). IE handles the drag-n-drop and sorting just fine... but if you try to enter text on any of the "items" with text fields, the text field won't hold the cursor focus.
Even with the jQuery UI "button" styling, there doesn't seem to be any standards-compliance issues that I know of in the resulting HTML. Any ideas?
As discussed in the comments on the original question, the issue was with "jsbin.com" itself rather than the code I was testing there. When you test code inside of jsbin's frames, using Internet Explorer, input focus gets stolen by the body tag.
You can work around the problem by popping-out the results as a separate window, rather than running it inside of a frame. Also, "jsfiddle.com" doesn't have this issue in the first place.
I have placed labels in my input fields to have explanatory text display in the background and when the user types in the field, the text disappears. I'm using the example explained here: How to create a label inside an <input> element?
and specifically at http://attardi.org/
When the password though is saved by the browser such as in Google chrome, the text becomes garbled as in this image (this is currently on my local computer):
The background text is not disappearing for saved passwords. Any help would be appreciative - thanks.
You could also take advantage of the new placeholder attribute. Read about it here.
No IE support, though.
Option 2 would be using Jquery. Since you're already using Jquery for the label solution, you could add code that checks the value of the input after the document has loaded then show or hide the label accordingly.
This code would go inside the document ready function:
$(function() {
// Handler for .ready() called.
});
Just use the placeholder attribute – it's so simple:
<input type="email" placeholder="email" />
Literally, that's it; the browser will take care of the behavior.
Yes, it won't work in IE (until IE10 is released) – but you've already got labels next to the fields anyway, so it's not like IE users won't be able to tell which fields are which.
I investigated further, and this only occurred in Google Chrome and not Mozilla Firefox. My setup was correct and looks like it might in fact be a bug in Chrome. See issue log: http://code.google.com/p/chromium/issues/detail?id=117661
This also looks like it will occur for the placeholder attribute too when Chrome tries to do password autosave process and doesn't look to see if there is a previous inputted value.
Thanks for the input from all.
Working with the following code to dynamically change the submit buttons to image based buttons.
marker2 = jQuery('<span class="marker"> </span>').insertBefore('input#ResetDatesButton');
jQuery('input#ResetDatesButton').detach().attr('type', 'image').attr('src',theme_folder+'/style/images/ResetDatesButton.png').insertAfter(marker2);
marker2.remove();
This works beautifully in FF, Chrome and Safari but fails totally in IE6, 7 and 8. Then button is removed, but not replaced. How can I achieve the same result in IE?
IE doesn't allow you to dynamically change the type attribute of form inputs.
The only option you have is to delete the element and replace it with a new one of the correct type,
Internet Explorer doens't allow input[type] changes on the fly. Here is another thread discussing it: change type of input field with jQuery
Then, jQuery can do nothing to it works.
You will to:
Use CSS on your input[type=button] to show the image you want and hide the text.
Or hide the input, put an a tag with the image you want and set the click() to call the input.click().
EDIT:
Here is a little sample showing how to replace the input[type=button] with another control (you can use CSS to show it how you want) and then trigger the button click as well.
I'm fooling around with contentEditable and execCommand, and I'm trying to make it so that when a button is pressed,
If there's text selected in the contentEditable, it becomes bolded
If there's no text selected in the contentEditable, then any text typed in the contentEditable after pressing the button is bolded
I tried using the following Javascript command:
document.execCommand('bold', false, null);
But unfortunately, that only causes text that's selected to become bolded; if no text is selected and you start typing after pressing the button, the text shows up unbolded.
I noticed that if I press Ctrl+B in the contentEditable, it does exactly what I'd like to accomplish, but I'd like to accomplish this using Javascript (and without simulating a Ctrl+B in Javascript).
Actually the document.execCommand() call does exactly what you want (you can prove this by calling it from a keydown event handler), and I suspect it's the effect of whatever button or whatever else you may be using to trigger the command that's the problem.
Javascripts Range can check out selected text, see this link. You can use it to get the selected text (startnode, endnode, offset etc). If you want new text to be bold, just add it in a new created <p> that you give bold in css. BUT, this might not work in IE...