在Jquery中可以直接调用$("#idEle").focus();来获取焦点。
这样当哪一项输入框为空是就将焦点移动那一项输入框..这项功能使用起来非常方便..但是存在一个小小的问题...
那就是obj.focus()将焦点移动到输入框后,会将文字光标(就是一闪一闪的竖线)移动到这个输入框的第一个字符的位置...就上面的判断而言..如果文本框中没有内容..obj.focus正好可以满足我们直接在文本框中输入内容而不用点击一下文本框以使文本有焦点...
但是,如果文本框中已经有内容了..但是这个内容不合法.obj.focus()同样的将光标移动到了这个文本框的第一个字符的位置..这时就会让注意用户体验的设计师郁闷了...我们需要的是文本框得到焦点,然后文字光标移动到文本框的最后,让用户可以不用点击文本框直接输入内容..输入的内容会在原来的内容的后面追加起来..
chrome/firefox 调用focus后会自动返回到输入框内容上一次鼠标的位置,如果不在最后需要移动到最后可以使用selectionStart属性
<
script
type
=
"text/javascript"
>
function test(obj) {
if (typeof obj == 'string') obj = document.getElementById(obj);
obj.focus();
if (obj.createTextRange) {
var rtextRange = obj.createTextRange();
rtextRange.moveStart('character', obj.value.length);
rtextRange.collapse(true);
rtextRange.select();
}
else if (obj.selectionStart) obj.selectionStart = obj.value.length;
}
</
script
><
input
type
=
"text"
id
=
"txt1"
/><
input
type
=
"button"
onclick
=
"test('txt1');"
value
=
"执行"
/><
br
/>
<
input
type
=
"text"
id
=
"txt2"
/><
input
type
=
"button"
onclick
=
"test('txt2');"
value
=
"执行"
/>
但是可编辑的“<div>”标签而不是“<input>”标签。“<div>”标签没有“selectionStart”属性;另一种不用迂回的代码实现:
<
script
type
=
"text/javascript"
>
function test(obj) {
if (typeof obj == 'string') obj = document.getElementById(obj);
obj.focus();
if (obj.createTextRange) {//ie
var rtextRange = obj.createTextRange();
rtextRange.moveStart('character', obj.value.length);
rtextRange.collapse(true);
rtextRange.select();
}
else if (obj.selectionStart){//chrome "<
input
>"、"<
textarea
>"
obj.selectionStart = obj.value.length;
}else if(window.getSelection){
var sel = window.getSelection();
var tempRange = document.createRange();
tempRange.setStart(obj.firstChild, obj.firstChild.length);
sel.removeAllRanges();
sel.addRange(tempRange);
//obj.focus();
}
}
</
script
>
<
div
id
=
"txt1"
contenteditable
=
"true"
></
div
>
<
input
type
=
"button"
onclick
=
"test('txt1');"
value
=
"执行"
/><
br
/>
<
div
id
=
"txt2"
contenteditable
=
"true"
></
div
>
<
input
type
=
"button"
onclick
=
"test('txt2');"
value
=
"执行"
/>
<
br
/>
<
br
/>
<
input
id
=
"txt3"
type
=
"text"
/>
<
input
type
=
"button"
onclick
=
"test('txt3');"
value
=
"执行"
/><
br
/>
<
input
id
=
"txt4"
type
=
"text"
/>
<
input
type
=
"button"
onclick
=
"test('txt4');"
value
=
"执行"
/>
相关推荐
本次文档实现当点击网页文本框获取焦点就改变文本框内部颜色的部分功能
纯javascript实现副文本框 ,实用
calendar 多风格日期输入控件 javascript日期输入文本框
javascript动态增加文本框 点击按钮,可以直接增加文本框,动态实现,不跳转页面,也不刷新原页面.
javascript日期输入文本框 源代码
JavaScript实现文本框提示 JavaScript实现文本框提示 JavaScript实现文本框提示 JavaScript实现文本框提示
JavaScript鼠标点到文本框时的提示信息 JavaScript鼠标点到文本框时的提示信息 JavaScript鼠标点到文本框时的提示信息
javaScript实现点击文本框text弹出日期选择控件源码.zip
JavaScript文本框提示插件placeholder
网页模板——javaScript实现点击文本框text弹出日期选择控件源码
; charset=gb2312"> 输入框控制 <p> 输入框控制 <p> (1): 只能输入数字,不含小数点: (/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> ...(2): 只能输入数字,含小数点: ...
html javascript jquery 文本框水印 调用简单,不影响asp.net验证控件
javascript计算文本框输入内容的长度
Javascript实现的网页文本框输入提示 实现原理: 文本框输入内容后,搜索字符串数组,将匹配内容写入DIV以下拉列表形式展现,并支持方向键选择,效果类似搜索网站的输入提示。 友情提示: 较为粗糙的实现方法,...
纯javascript编写的颜色选择板 可用在各种论坛,网站使用,让用户可以 动态任意选择颜色
javascript 文本框下拉提示与cookie应用实例
JavaScript 文本框下拉提示,可以自己添加数据
文本框获得焦点改变背景颜色,HTML,JAVASCRIPT,CSS,做网页前台的时候看一看
JavaScript判断文本框的合法性