html可手动输入的下拉框(html 可输入的下拉框)

http://www.itjxue.com  2023-01-29 09:00  来源:未知  点击次数: 

html5如何实现文本框下拉选项功能

可以使用HTML5 list 属性。list 属性需要应用到 input 框上,然后内容写一个自定义的 id

然后在任意位置放一对 datalist 标签,并给 datalist 框一个 id,和 list 属性指向的 id 一致即可。

在 datalist 标签下放列表项,每个列表项用 option 元标签来表示,option 标签里用 value 属性填写内容,label 属性来做提示。

下面是示例代码:

form action=""

input type="text" list="url_list" name="text" /

input type="submit" /

/form

datalist id="url_list"

option label="HZ赫兹工作室" value="" /

option label="提示1" value="列表项1" /

option label="提示2" value="列表项2" /

option label="" value="列表项3" /

/datalist

HTML5之前一般使用select标签或者div+js实现

html有一个下拉框,可以选择也可以输入,并且选择不同的值要改变img的路径,如何实现,我用sel

如果没有确认按钮,那就给input帮上mouseup事件,或者使用change事件。响应时获取input的value并且改变图片的src属性的值

HTML可输入编辑的下拉选择框怎么做

SCRIPT?LANGUAGE="JavaScript"

!--?Begin

function?catch_keydown(sel)

{

switch(event.keyCode)

{

case?13:

//Enter;

sel.options[sel.length]?=?new?Option("","",false,true);

event.returnValue?=?false;

break;

case?27:

//Esc;

alert("text:"?+?sel.options[sel.selectedIndex].text?+?",?value:"?+?sel.options[sel.selectedIndex].value?+?";");

event.returnValue?=?false;

break;

case?46:

//Delete;

if(confirm("Delete!?"))

{

sel.options[sel.selectedIndex]?=?null;

if(sel.length0)

{

sel.options[0].selected?=?true;

}

}

event.returnValue?=?false;

break;

case?8:

//Back?Space;

var?s?=?sel.options[sel.selectedIndex].text;

sel.options[sel.selectedIndex].text?=?s.substr(0,s.length-1);

event.returnValue?=?false;

break;

}

}

function?catch_press(sel)

{

sel.options[sel.selectedIndex].text?=?sel.options[sel.selectedIndex].text?+?String.fromCharCode(event.keyCode);

event.returnValue?=?false;

}

//End?--

/script

/head

select?size="1"?name="fh_cp"?onKeyDown="catch_keydown(this);"?onKeyPress="catch_press(this);"?style="font-size:12px;"

option/option

?if?($FH_CP""){

$seek_cp="select?gg,cp?from?bom?where?lh=\'$FH_CP\'?";

$result_cp=@pg_exec($link,$seek_cp);

$GG=trim(pg_result($result_cp,0,"gg"));

$CP=trim(pg_result($result_cp,0,"cp"));

$C_G=$CP.\'?\'.$GG;

echo?"option?selected?value=\\"$FH_CP\\"$C_G/option";?}?

?for($j=0;$j$row_fh;$j++){

$gg_fh=trim(pg_result($result_fh,$j,"gg"));

$cp_fh=trim(pg_result($result_fh,$j,"cp"));

$seek_lh="select?*?from?bom?where?cp=\'$cp_fh\'?and?gg=\'$gg_fh\'?";

$result_lh=pg_exec($link,$seek_lh);

$lh_fh=trim(pg_result($result_lh,0,"lh"));

$cp_gg=$cp_fh.\'?\'.$gg_fh;

if($lh_fh==$FH_CP){

echo?"option?selected?value=\\"$lh_fh\\"$cp_gg/option";

}

else{

echo?"option?value=\\"$lh_fh\\"$cp_gg/option";

}

}

?

/select

html中怎么可以使下拉框既可以选择也可以手动输入

select contenteditable="contenteditable"

option contenteditable="contenteditable"1312312/option

option contenteditable="contenteditable"12321313/option

/select

(责任编辑:IT教学网)

更多