信箱选取收件人效果-JavaSript-爱易网页

信箱选取收件人效果

日期：2014-05-16　浏览次数：20397 次

邮箱选取收件人效果
现在要做手机上选取收件人效果
收件人文本框里输入一部分信息下面就列出联系人列表点击联系人将此联系人放入文本框内，光标定位到此联系人后面
继续输入继续上面的流程
点退格键删除一个联系人而不是一个字母鼠标点击或手按屏幕上某一联系人感觉是一个整体（整条选中效果）如果是桌面浏览器光标变小手

邮箱选取收件人和这个类似不过因为我做的是手机端应用在文本框下显示浮层不是很好

请问有这种jquery插件吗

------解决方案--------------------
jQuery Autocomplete
------解决方案--------------------
以前写了一个简单效果。你可以根据你的需求修改。
输入后回车



<!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>js 文本框效果</title>

<style type="text/css">

.inputs{width:600px;height:auto; border:1px solid #ddd;margin:100px auto;line-height:20px;}

.divInputs{width:auto;height:auto;line-height:20px;min-height:20px; }

.divHistory{height:20px;width:auto;line-height:20px;float:left;display:inline; margin:0px 3px; background-color:#dee;

    word-break:keep-all;/* 不换行 */

    white-space:nowrap;/* 不换行 */}

.clear{clear:both;}



 </style>

</head>

<body>



<div class="inputs" id='inputs'>

<div class="divInputs" id='divInputs'>

<input  type='text' value="" style="float:left;border:0px;height:20px; " id='txtInput'/>

<div class='clear'></div>

</div>

</div>

<input  type='button' value="查看设置的值" id="btn"/>

</body>





<script type="text/javascript">



window.onload=function()

{

   var inputs=[];

   var txtInput = document.getElementById("txtInput");

   var divInputs = document.getElementById("divInputs");

   document.getElementById("btn").onclick=function(){

    alert(inputs);

   } ;

   

   document.getElementById("inputs").onclick=function(){

        txtInput.focus();

   } ;

   txtInput.onkeydown=function(e)

   {

        e=e
------解决方案--------------------
event;

        if(e.keyCode==13){ // 回车

            var input = txtInput.value.trim();

            if(input==""){

                return;

            }

            if(inputs.indexOf(input)>-1){

                alert("内容已存在");

                return;

            }

            var div = document.createElement("div");

            div.innerHTML ="<span>" +input+"</span>";

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

信箱选取收件人效果

相关资料更多>

推荐阅读更多>