Question

我正在处理一个php应用程序。这就是我想要做的事情：

我有一个search box（textbox）和几个buttons。点击每个button后，我希望它用预定义的字符串填充search box。单击另一个button将删除search box中的内容并将其值替换为其预定义的字符串。还有一个清除文本框的按钮。

示例：

Button 1
on click -> textbox value = button1 

Button 2 
on click -> textbox value = button2 (old value is replaced)

任何人都可以使用JS代码来指导我吗？谢谢！

Answer 1

应用＆＃39;按钮＆＃39;每个按钮的类和每个按钮的唯一ID。

$(".button").click(function(){
     var id = this.id;
     $('#searchTextId').val($('#'+id).attr('value'));
});

Answer 2

$(document).ready(function(){
	$(document).on('click','.click_me',function(e){
		e.preventDefault();
		var search_val = $(this).attr('data-value');
		$('.text_search').val(search_val);
	});
	$(document).on('click','.clear_me',function(e){
		$('.text_search').val('');
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="click_me" data-value="text 1" value="button 1"/>
<input type="button" class="click_me" data-value="text 2" value="button 2"/>
<input type="button" class="click_me" data-value="text 3" value="button 3"/>
<input type="button" class="click_me" data-value="text 4" value="button 4"/>

<input type="button" class="clear_me" value="Clear"/>

<input type="text" class="text_search" />

Answer 3

<script>
function setText(obj) {
var val = obj.value;
document.getElementById('textBox').value = val;
}
</script>

<input type="button" name="btn1" id="btn1" value="Hello" onclick="setText(this)">

<input type="button" name="btn1" id="btn1" value="World" onclick="setText(this)">

<input type="button" name="btn1" id="btn1" value="StackOverflow" onclick="setText(this)">

<input type="text" name="textBox" id="textBox" value=""/>

在这里测试：http://jsfiddle.net/o5fp0uq1/

使用按钮自动填充文本框

3 个答案: