admin管理员组

文章数量:1026989

I have a selectbox with couple of options to be selected by the user, when the user selects "First Name ", I want to the placeholder text 'Enter your First Name' to be appear beside the textbox. please find my piece of my code below:

HTML:

<select id="selectionType">
<option value="-1">Select One</option>
<option value="0">First Name</option>
<option value="1">Last Name</option>

JS:

    var placeholderText = {"First Name":"Enter your First Name","Last Name":"Enter your Last Name"};

$("#selectionType").on("change",function() {
    var selection = document.getElementById("selectionType");
    var inputBox = document.getElementById("inputBox");

    var selectedVal = $('#selectionType').find(':selected').text();
    if (placeholderText[selectedVal] !== undefined) {
        inputBox.placeholder = placeholderText[selectedVal];
    }
});

It works fine in Chrome and FF, but it fails in IE 8 & 9... Any help on this.

See Demo : /

I have a selectbox with couple of options to be selected by the user, when the user selects "First Name ", I want to the placeholder text 'Enter your First Name' to be appear beside the textbox. please find my piece of my code below:

HTML:

<select id="selectionType">
<option value="-1">Select One</option>
<option value="0">First Name</option>
<option value="1">Last Name</option>

JS:

    var placeholderText = {"First Name":"Enter your First Name","Last Name":"Enter your Last Name"};

$("#selectionType").on("change",function() {
    var selection = document.getElementById("selectionType");
    var inputBox = document.getElementById("inputBox");

    var selectedVal = $('#selectionType').find(':selected').text();
    if (placeholderText[selectedVal] !== undefined) {
        inputBox.placeholder = placeholderText[selectedVal];
    }
});

It works fine in Chrome and FF, but it fails in IE 8 & 9... Any help on this.

See Demo : http://jsfiddle/sW6QP/6/

  • javascript
  • jquery
  • html
  • placeholder
Share Improve this question asked Aug 1, 2014 at 9:00 RamkumarRamkumar 4561 gold badge14 silver badges32 bronze badges 1
  • 2 IE 8,9 DO NOT support placeholders. Check this for a solution – Shaunak D Commented Aug 1, 2014 at 9:02
Add a ment  | 

3 Answers 3

Reset to default 2

Use jQuery Placeholder to support in IE 8 & 9.

because IE 8 and 9 don't support html5 placeholder and only support in IE 10.

Ref: http://www.w3schools./Tags/att_input_placeholder.asp

try

 var placeholderText = {
    "First Name": "Enter your First Name",
    "Last Name": "Enter your Last Name"
};

$("#selectionType").on("change", function () {

    if (this.value != -1) {
        $("#inputBox").val(placeholderText[$("#selectionType option:selected").text()]);
    } else {
        $("#inputBox").val("");
    }

});

UPDATED DEMO

Your brand new code:

var placeholderText = {"First Name":"Enter your First Name","Last Name":"Enter your Last Name"};
$("#selectionType").on("change",function() {
    var selection = $("#selectionType");
    var inputBox = $("#inputBox");

    var selectedVal = $(':selected', selection).text();
    if (placeholderText[selectedVal] !== undefined) {
        inputBox..attr('placeholder', placeholderText[selectedVal]);
    }
});

It should solve your problem

I have a selectbox with couple of options to be selected by the user, when the user selects "First Name ", I want to the placeholder text 'Enter your First Name' to be appear beside the textbox. please find my piece of my code below:

HTML:

<select id="selectionType">
<option value="-1">Select One</option>
<option value="0">First Name</option>
<option value="1">Last Name</option>

JS:

    var placeholderText = {"First Name":"Enter your First Name","Last Name":"Enter your Last Name"};

$("#selectionType").on("change",function() {
    var selection = document.getElementById("selectionType");
    var inputBox = document.getElementById("inputBox");

    var selectedVal = $('#selectionType').find(':selected').text();
    if (placeholderText[selectedVal] !== undefined) {
        inputBox.placeholder = placeholderText[selectedVal];
    }
});

It works fine in Chrome and FF, but it fails in IE 8 & 9... Any help on this.

See Demo : /

I have a selectbox with couple of options to be selected by the user, when the user selects "First Name ", I want to the placeholder text 'Enter your First Name' to be appear beside the textbox. please find my piece of my code below:

HTML:

<select id="selectionType">
<option value="-1">Select One</option>
<option value="0">First Name</option>
<option value="1">Last Name</option>

JS:

    var placeholderText = {"First Name":"Enter your First Name","Last Name":"Enter your Last Name"};

$("#selectionType").on("change",function() {
    var selection = document.getElementById("selectionType");
    var inputBox = document.getElementById("inputBox");

    var selectedVal = $('#selectionType').find(':selected').text();
    if (placeholderText[selectedVal] !== undefined) {
        inputBox.placeholder = placeholderText[selectedVal];
    }
});

It works fine in Chrome and FF, but it fails in IE 8 & 9... Any help on this.

See Demo : http://jsfiddle/sW6QP/6/

  • javascript
  • jquery
  • html
  • placeholder
Share Improve this question asked Aug 1, 2014 at 9:00 RamkumarRamkumar 4561 gold badge14 silver badges32 bronze badges 1
  • 2 IE 8,9 DO NOT support placeholders. Check this for a solution – Shaunak D Commented Aug 1, 2014 at 9:02
Add a ment  | 

3 Answers 3

Reset to default 2

Use jQuery Placeholder to support in IE 8 & 9.

because IE 8 and 9 don't support html5 placeholder and only support in IE 10.

Ref: http://www.w3schools./Tags/att_input_placeholder.asp

try

 var placeholderText = {
    "First Name": "Enter your First Name",
    "Last Name": "Enter your Last Name"
};

$("#selectionType").on("change", function () {

    if (this.value != -1) {
        $("#inputBox").val(placeholderText[$("#selectionType option:selected").text()]);
    } else {
        $("#inputBox").val("");
    }

});

UPDATED DEMO

Your brand new code:

var placeholderText = {"First Name":"Enter your First Name","Last Name":"Enter your Last Name"};
$("#selectionType").on("change",function() {
    var selection = $("#selectionType");
    var inputBox = $("#inputBox");

    var selectedVal = $(':selected', selection).text();
    if (placeholderText[selectedVal] !== undefined) {
        inputBox..attr('placeholder', placeholderText[selectedVal]);
    }
});

It should solve your problem

本文标签： javascriptChange placeholder text based on the dropdown selectionStack Overflow

版权声明：本文标题：javascript - Change placeholder text based on the dropdown selection? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745659749a2161815.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。