当前位置：首页 > 网页特效 > 滚动代码 >

JavaScript实现input输入框点击获取文字内容

时间：2014-04-09 08:49 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>input输入框获取js点击文字内容</title>
<style>
.c{ width:100px; height:25px; line-height:25px; text-align:center; border:1px solid #eee; margin:5px; float:left; font-size:12px; cursor:pointer}
.show{ width:800px; height:auto; margin:0 auto;}
</style>
</head>
<body>
<div class="show">
<div class="c" id="c0">菜单导航</div>
<div class="c" id="c1">时间日期</div>
<div class="c" id="c2">焦点图</div>
<div class="c" id="c3">tab标签</div>
<div class="c" id="c4">jquery特效</div>
<div class="c" id="c5">在线客服</div>
<input id="i" type="text" style="width:720px; height:25px; border:1px solid #ccc"/>
</div>
<script>
var x=["菜单导航","时间日期","焦点图","tab标签","jquery特效","在线客服"];
var y=[];
function $(id){ 
	return document.getElementById(id)
};
for(var i=0,m=x.length;i<m;i++){
	$("c"+i).onclick=(function(i){
	return function(){
		var s=y.join(",").indexOf(x[i]);
		if(s>=0){
		for(var r in y){
		if(y[r]==x[i]){y.splice(r,1)}
		}
		}
		else{
		y.push(x[i])
		}
		$("i").value=y.join(" ");
	}
})
(i)
}
</script>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

Js实现INPUT输入框，当鼠标点击文字时自动获取文字内容，并显示在文本框中，一个惯用的表单技巧，有时可省去一些用户输入的麻烦，可有效提升用户体验。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>input输入框获取js点击文字内容</title>

<style>

.c{ width:100px; height:25px; line-height:25px; text-align:center; border:1px solid #eee; margin:5px; float:left; font-size:12px; cursor:pointer}

.show{ width:800px; height:auto; margin:0 auto;}

</style>

</head>

<body>

<div class="show">

<div class="c" id="c0">菜单导航</div>

<div class="c" id="c1">时间日期</div>

<div class="c" id="c2">焦点图</div>

<div class="c" id="c3">tab标签</div>

<div class="c" id="c4">jquery特效</div>

<div class="c" id="c5">在线客服</div>

<input id="i" type="text" style="width:720px; height:25px; border:1px solid #ccc"/>

</div>

<script>

var x=["菜单导航","时间日期","焦点图","tab标签","jquery特效","在线客服"];

var y=[];

function $(id){

return document.getElementById(id)

};

for(var i=0,m=x.length;i<m;i++){

$("c"+i).onclick=(function(i){

return function(){

var s=y.join(",").indexOf(x[i]);

if(s>=0){

for(var r in y){

if(y[r]==x[i]){y.splice(r,1)}

}

}

else{

y.push(x[i])

}

$("i").value=y.join(" ");

}

})

(i)

}

</script>

</body>

</html>