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
Related
I am trying to put a few text inputs on the same web page as where I have a d3.js svg element. I append the svg to a div within the html, and then have the form in the <body> before this div. The text input appears, but I am not able to edit it on either Firefox or Chrome. As soon as I don't include the d3.js script on the page, the form element works fine. What could be happening to cause this? I already have some standard html buttons, and they are working fine.
Here's what I've tried.
Renaming the text input and making sure neither its name nor its id clash with anything existing.
Explicitly setting the readonly property to false in javascript
What else can I try? I don't see anything all that on point in SO but apologies if I missed something.
Make sure no part of the content that D3 creates overlaps your textbox. If you can get to the textbox by tab:ing, it could just be stuck behind some invisible content. Try positioning stuff differently to overcome this if it seems to be the issue.
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/
I wanted to highlight text inside iframe if the user clicks the same text outside iframe in the webpage.
I could search for the contents using the below code.
$("#iframe").contents().text().search("text_to_be_searched");
But how to highlight the text?
ASSUMING that your code for finding the text is going to work (and it is going to be a little complicated to get that to work), then all you have to do is this:
$("#iframe").contents().text().search("text_to_be_searched").
wrap("<span class='highlight-me'>");
And then use CSS to highlight anything with a class of 'highlight-me'.
If that doesn't work, we'd have to see how you are finding the text, you need to get into the form of a node that jQuery can work with.
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.