根据用户的选择更改占位符文本 [英] Changing the placeholder text based on the users choice

问题描述

jQuery是允许的，但是仅限HTML的解决方案是首选。

我有一个选择框和几个选项。当用户选择'姓名'时，我想让占位符文本'输入您的姓名'出现在相邻的文本框中。

同样，对于'ID' - >输入你的ID'。

参见 http://jsfiddle.net / Uy9Y3 /

 < select> 
< option value = -  1>选择一个< / option> 
< option value =0>名称< / option> 
< option value =1> ID< / option> 
< / select> 
< input type =text> 
  

这是客户的一项要求，我一直无法弄清楚。

如果有帮助，网站使用Spring框架。 您需要在选择更新时更新占位符，您需要使用javascript来执行此操作。

您可以使用HTML5 <$将每个选项元素上的占位符设置为一个属性c $ c> data - 样式属性。然后使用jQuery附加一个更改事件侦听器，它将更新输入框的占位符属性。

请注意，占位符属性在旧版本的IE浏览器，所以如果你需要支持旧的IE浏览器，你需要在另一个库中添加这个功能。

工作演示 b HTML

 < select id =mySelect> 
< option data-placeholder =value = -  1>选择一个< / option> 
< option data-placeholder =输入您的姓名value =0>名称< / option> 
< option data-placeholder =输入您的IDvalue =1> ID< / option> 
< / select> 
< input id =myInputtype =text> 
  

jQuery
< $（'＃c $ c> $（'＃mySelect'）。on（'change'，function（）{
var placeholder = $（this）.find（'：selected'）。data （'placeholder'）;
$（'＃myInput'）。attr（'placeholder'，placeholder）;
}）;

jQuery is permitted, but an HTML-only solution is preferred.

I have a select box with a couple of options. When the user selects 'Name', I want the placeholder text 'Enter your name' to appear in the adjacent text-box.

Likewise for 'ID' -> 'Enter your ID'.

See http://jsfiddle.net/Uy9Y3/

<select>
    <option value="-1">Select One</option>
    <option value="0">Name</option>
    <option value="1">ID</option>
</select>
<input type="text">

This is a requirement by a client that I haven't been able to figure out.

If it helps, the website is using the Spring framework.

解决方案

Since you need to update the placeholder when the select updates, you'll need to use javascript to do it.

You could set the placeholder you would like to display as an attribute on each option element using the HTML5 data- style attributes. Then use jQuery to attach a change event listener which will update the placeholder attribute of the input box.

Note that the placeholder attribute doesn't have any effect in older versions of IE, so if you need to support old IE you'll need to polyfill that functionality with another library.

Working Demo

HTML

<select id="mySelect">
    <option data-placeholder="" value="-1">Select One</option>
    <option data-placeholder="Enter your name" value="0">Name</option>
    <option data-placeholder="Enter your ID"  value="1">ID</option>
</select>
<input id="myInput" type="text">

jQuery

$('#mySelect').on('change', function() {
    var placeholder = $(this).find(':selected').data('placeholder');
    $('#myInput').attr('placeholder', placeholder);
});

这篇关于根据用户的选择更改占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！