月度归档:2017年11月

获取input输入值回车按钮事件不提交表单

网站开发中经常会用到鼠标或键盘事件,实现表单提交,获取用户输入值等功能,由于浏览器的不同,对回车的默认功能不尽相同。

在form表单中,往往需要输入多个input值,如果某个input值为空则不能提交表单(必填项),按下回车会自动提交表单,有些时候并不需要提交表单,只是验证输入值是否正确。

做这些开发是为了提高用户体验,用户习惯按TAB健进行input之间的切换,按回车提交表单。笔者也是慢慢摸索着不断学习,经实战总结出来。

onclick点击获取input值方法

JS部分

<script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS
<script type="text/javascript">
 var result,input
 function record(){
 result = document.getElementById("result").innerHTML;
 input = document.getElementById("email").value;//email输入值
 document.getElementById("result").innerHTML=input;//获取input值
}
</script>

HTML部分

<form>
 <input type="text" class="intxt" id="email" name="email" placeholder="输入邮箱"/>
 <p><input type="button" id="zhucenext" class="loginBtn" onclick="record()" value="点击获取input值"/></p>
 <p id="result"></p><!--获取的值在这里显示-->
</form>

直接点击<input id=”zhucenext”/>按钮能自动获取里面值,但是有时候我们会习惯用回车,请继续看如何实现增加键盘的回车键功能。

回车激活按钮事件获取input值

这里需要注意的是,一般input放在某个表单form表单内,在某些浏览器内,直接回车会自动提交表单。比如增加验证码之后,回车不执行提交表单。

回车键的键值是13,回车事件通用代码如下:

<input type="text" id="" name="" onkeypress="
if(event.keyCode==13){
zhucenext();//执行id为zhucenext的click事件,多个事件之间用英文的";"隔开
return false;//不执行表单提交
}"/>

点击事件和回车事件完整的应用实例

<!doctype html>
<html>
<head>
<script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS
<script type="text/javascript">
 function record(){
 var input=document.getElementById("email").value;//通过id获取需要验证的(input)表单元素的值
 if(input==""){//如果获取的值为空
  alert("请输入邮箱名");//弹出提示
 return false;//返回false
 }
 var input2=document.getElementById("vdcode").value;//第二个需要验证的(input2)元素值,以此类推
 if(input2==""){
  alert("请输入验证码");
  return false;
 }
 //判断为空值返回,不为空继续执行下面
 var result=document.getElementById("result").innerHTML;
 document.getElementById("result").innerHTML=input;//设置只获取input(邮箱)的值
 //执行其他命令直接写
 menuShow('zhuceboxnonne');
}
</script>
</head>
<body>
<form method="post" action="new.php" name="form">
 <input type="text" class="intxt" id="email" name="email" placeholder="输入邮箱" onkeypress="if(event.keyCode==13){record();return false;}"/></p><!--验证邮箱是否为空,是否通过回车都不提交表单-->
 <input type="text" class="intxt" id="vdcode" name="vdcode" placeholder="验证码" onkeypress="if(event.keyCode==13){record();return false;}"/><!--验证验证码是否为空,通过后回车执行表单提交,否则返回-->
 <img id="vdimgck" onclick="this.src=this.src+'?'" alt="看不清?点击更换" src="../include/vdimgck.php"/>
 <button type="submit" id="login" class="loginBtn" onclick="record()">提交表单</button></p><!--点击button提交表单,不能return false,否则无法提交表单-->
</form>
<p id="result"></p><!--获取的结果-->
</body>
</html>

这样就能实现一个回车执行多个input按钮事件,多个onkeypress需要用“;”隔开。

DedeCMS用ShowMsg函数提示信息跳转改为弹出提示框

DedeCMS的提示信息默认的是跳转,好处是防止有些浏览器禁止了弹出窗口,但用户体验稍差,可以修改提示信息为弹窗更友好,重庆SEO吖七做两种修改方法:

第一种修改方法

举个表单提交的例子,实现功能:

①表单字段为空,弹出对话框提示信息,不提交表单,返回;
②表单信息完整无误,更改点击提交后的跳转为弹出“成功提交”对话框信息,关闭当前窗口并刷新;

了解一下ShowMsg函数

DedeCMS的提示信息是通过ShowMsg函数实现的,一般格式为:

ShowMsg($msg,$gourl,$onlymsg=0,$limittime=0)

打开include/common.func.php,找到ShowMsg函数,结合案例说明:

ShowMsg("成功登录,5秒钟后转向系统主页...","index.php",0,2000);

$msg参数是要返回的信息,也就是提示的问题;

$gourl参数是提示完成后要返回的页面,参数有:

-1 代表返回上一页;
index.php 返回指定的index.php页面;
javascript:window.opener=null;window.open('','_self');window.close(); 关闭当前跳转的提示窗口;

$limittime参数是提示出现的秒数,以毫秒为单位;1000就是1秒。

$onlymsg参数是提示的显示方式,具体参数有:

$onlymsg=0 为0,则以跳转到新页面显示; 
$onlymsg<>0 不为0,则以弹出对话框的形式进行显示

如果$gourl为空,或者$onlymsg==1,跳转的页面是空白,因此进行如下修改,找到

$msg = "<script>alert(\"".str_replace("\"","“",$msg)."\");</script>";

修改为:

$msg = "<script>history.go(-1);location.reload()</script>";

让$gourl值为1时,就能实现返回上级(历史)页面并刷新,但并不提示任何信息。这样做的好处是:htm页面内编写JS判断字段数据是否规范,不满足条件不能提交,不必提示信息跳转。

结合点击或回车事件

在所需要修改的模板</head>之前增加代码

<script type="text/javascript">
 function record(){
 alert("更新信息已成功");
 }
</script>

对应的提交(确定)按钮,需要增加onclick鼠标点击效果。

<button class="button2" type="submit" onclick="record()">确定</button>

当然如果希望输入某个字段(如name=”uname”)后回车就需要在对应的input增加代码

<input type="text" id="" name="uname" onkeypress="
if(event.keyCode==13){
record();//执行click事件,多个事件之间用英文的";"隔开
return false;//不执行表单提交
}"/>

以上可以实现用点击按钮或者回车实现提示信息为弹出对话框,点击确定后才真正提交内容。

判断所字段是否为空,参考文章《详解获取input输入值并实现回车激活按钮事件且不提交表单》。

第二种修改方法

举个购物车提交的例子,实现功能:

用户提交商品到购物车后不跳转到购物车,直接返回原页面并刷新该页面。

打开include/common.fun.php,找到

if($gourl=='' || $onlymsg==1)
{
 $msg = "<script>alert(\"".str_replace("\"","“",$msg)."\");</script>";
}

修改为

if($gourl=='' || $onlymsg==1)
{
 $msg = "<script>alert(\"".str_replace("\"","“",$msg)."\");self.location=document.referrer;</script>";
}

打开plus/posttocar.php,找到

ShowMsg("已添加加到购物车,<a href='car.php'>查看购物车</a>","car.php");

修改为

ShowMsg("已添加加到购物车,<a href='car.php'>查看购物车</a>");

DedeCMS跳转提示信息修改总结

第一种是利用原生JavaScript与DedeCMS源代码,功能较强大,可以对字段进行筛选、判断是否空等操作,根据自己的实际需要进行修改;

另一种是只利用了DedeCMS源代码,功能较单一。根据自己的实际需要选择任意一种都可以,两种方法有冲突。

提交数量和自定义字段到购物车-DEDECMS

用户体验是网站建设中最重要的环节,而流量只是其中一个影响SEO排名的因素而已,真正发生转化的是网站拥有良好的用户体验和丰富内容。下面就围绕着用户体验分享一个购物流程的案例。

DedeCMS有简单商城的功能,大多数人不用dede来做商城,而一般的企业站除了展示外,还有订单提交或者订购的功能。网上资源比较有限,大多东抄西抄,能真正做的人还是比较少。废话不多说,看效果图。

可以看到dede商品模板中,实现功能如下:提交衣服尺码,购物数量,自定义字段到购物车;提交到购物车后停留在原页面。

(帖子2016年1月5日更新)

有朋友问我上面商品页的下面几个缩略图的调用和放大镜效果,特写了一个帖子《结合dede图集局部放大镜效果jquery特效代码兼容性强

1.衣服尺码、购物数量等自定义字段提交到购物车

这里并不需要js支持,只需要在商品模板中,找到

<form id="formcar" name="formcar" method="post" action="{dede:field name='phpurl'/}/posttocar.php">

在提交表单里面增加字段,guige为自定义,buynum为默认,不可更改。如果想实现按钮自动增加减,请移步《dede购物车优化之商品全选及数量增加减按钮》

<form id="formcar" name="formcar method="post" action="{dede:field name='phpurl'/}/posttocar.php">
....
<p>尺码:
 <select name="guige" >
  <option value="155/76">155/76</option>
  <option value="155/78">155/78</option>
  <option value="155/80">155/80</option>
  <option value="155/82">155/82</option>
</select>
</p>
<p>
<input name="buynum" type="text" id="buynum" value="1"/>
</p>
.....
</form>

表单的数据发送到/plus/postocar.php,获取数据传送到购物车。找到/plus/postocar.php,大概在43行左右找到

$rows['title']     = $rs['title'];

下面增加,可以理解为增加一个guige的索引,值为提交过来的guige字段

$rows['guige'] = $_POST['guige'];
$rows['buynum'] = $_POST['buynum'];

打开/templates/plus/car.htm,找到

 {dede:array.Items}

找到下面字段,在下面(或者其他合适的位置)

<td height="23"><span class="price">{dede:value.price/}</span ></td>
<!--后面增加-->
<td height="23">{dede:value.guige/}</td>

2.提交到购物车后停留在原页面

这里也不需要js支持,打开/plus/postocar.php,大概在46行,修改为对应的部分

$cart->addItem($id, $rows);
ShowMsg("已添加加到购物车!", "javascript:history.go(-1);", false, 500);  //修改提示字段,跳转时间为500毫秒,,返回上一页