TML中input文本输入框在某些情况下禁止或者限制部分操作是很有必要的,下面为大家分享一下如何在input文本输入框添加限制条件,验证内容是否选中或者内容编辑等,此方法仅供才考。
以图片形式方便大家手机端阅读:
图片形式
以文字形式方便大家在PC端验证:
1、选中去除文本框文字,离开后显示原有文字:
<input name="key" type="text" id="key" value="关键词" size="30"
onmouseover=this.focus();this.select();
onclick="if(value==defaultValue){value='';this.style.color='#000'}"
onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999" />
2、选中后方可编辑:
<input type="checkbox" name="tpbox" value="1" onclick="if(this.checked) {txtNo.disabled=false}else{txtNo.disabled=true}">你一定要幸福,我会好好的!
你的姓名:<input type="text" name="txtNo" size="20" value="选中前面的选项方可编辑" disabled>
3、点击链接后方可编辑:
<a href="#" onclick="username.readOnly=false;alert('你好,欢迎使用!')">先点击我哦!</a>
你的姓名:<input id="username" value="--请输入--" size="30" readOnly>
4、输入框从中间输入:从中间输入:
<input type="text" name="mid"style="text-align:center;">
5、输入框变色:输入框改变变色:
<input type="text" size="20" style="background-color:#FFFFFF"
onfocus="style.backgroundColor='#FFFF00'"
onblur="style.backgroundColor='#FFFFFF'">
6、输入框只能输入数字(用的是正则表达式):你的年龄:
<input onkeyup="value=value.replace(/[^\d]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
7、输入框只能输入中文(用的是正则表达式):你的中文名:
<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">
8、只能输入英文和数字(用的是正则表达式):
你 的昵称:<input onkeyup="value=value.replace(/[\W]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
onkeydown="if(event.keyCode==13)event.keyCode=9">
9、输入框不能编辑,但表单可以获得输入框内的值:
<input type="text" value="afreon" onclick="alert('总和不能编辑!');" onfocus="this.blur()" />
<input type="text" value="afreon" onclick="alert(this.value);" readonly />
<input value="不可修改" readonly= "true" type="text"/>//:字体颜色为黑体
10、输入框不能编辑,并且表单不能获得输入框内的值
<input value="不可修改" disabled="disabled" type="text"/>//:字体颜色为灰体
11、输入框禁止输入法:
<input onpaste="return false" style="ime-mode:disabled">
最近在写一个律师推荐前台的网站,在上面搜索框这里出现了问题,我想把搜索的图标放在搜索框里面,但是弄了半天都不大如意……
话不多说,我们直接进入主题 :
其实就把输入框与后面的图标一起放在一个div里面,然后将输入框的border设置为0px,最后设置div的border为最终的外边框
我们最直接上代码:HTML:
<div class="search">
<form action="http://baidu.com">
<input type="text" placeholder="请输入查找的律师或专长">
<span>
<a href="#"><img src="img/icon1.png" alt=""></a>
</span>
</form>
</div>
CSS:这里是设置外面整个div的样式
.search {
width: 250px;
height: 35px;
border: 1px solid white;
border-radius: 30px;
}
这里是设置里面的输入框的长宽、boder为0px、里面的字体大小、点击不会亮边框(outline:none)设置透明度这里使用rgba(),最后一个属性就是透明度(在0-1之间 )
在我们可以使用::marker伪元素来定制列表前缀。像下面这样:
主流浏览器中只有Safari不是完全支持,不过估计也马上会跟上来了。
::marker CSS 伪元素选择列表项的标记框,通常包含项目符号或数字。 它适用于要显示的任何元素或伪元素集:列表项,例如 <li> 和 <summary> 元素。
让我们看个具体的例子:
默认显示效果如下,浏览器会自动画一个小点在每个列表项前:
创建marker
::marker 伪元素标记框在每个列表项元素内自动生成,位于实际内容和 ::before 伪元素之前。
通常,列表项是 <li> HTML 元素,但其他元素也可以成为具有 display:list-item 的列表项。
给marker添加样式
在 ::marker 出现之前,可以使用 list-style-type 和 list-style-image 设置列表样式。这很方便,但我们需要更多。 改变颜色、大小、间距等,这就是 ::marker 出现的原因。 它允许从 CSS 中单独和全局定位这些伪元素:
list-style-type 属性提供了非常有限的样式。 ::marker 伪元素意味着您可以定位标记本身并将样式直接应用于它。
在这个示例中,第一项使用 list-style-type 设置样式,第二项使用 ::marker 设置样式。 第一种情况下的属性适用于整个列表项,而不仅仅是标记,这意味着文本和标记一样具有动画效果。 使用 ::marker 时,我们可以只定位标记(::marker)而不是文本。
改变Marker的方法,两种方式,效果一样:
使用SVG:
使用数字列表:
默认情况下,有序列表项OL上的标记是数字而不是项目符号。 在 CSS 中,这些被称为计数器,它们非常强大。 它们甚至具有设置和重置数字开始和结束位置的属性,或者将它们切换为罗马数字。 我们可以直接使用::marker来做,
更多使用方法,大家可以查看MDN,感谢阅读!
*请认真填写需求信息,我们会在24小时内与您取得联系。