js之2016.8.7

荣耀8搜索框交互实现

最新推荐文章于 2023-03-27 08:46:34 发布

原创最新推荐文章于 2023-03-27 08:46:34 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个基于荣耀8的搜索框实现方案，包括输入框的默认提示、点击聚焦及失去焦点时的行为调整，以及搜索按钮点击后的逻辑处理。文章详细展示了如何通过JavaScript实现这些功能，并确保了用户体验的一致性和友好性。

<input type="text" name="textbox" value="荣耀8" data-default="荣耀8" style="width:80%;height:36px;border:none;" onclick="text_click(this);" onblur="text_blur(this);" />
<input type="button" value="搜索" style="width:20%;height:36px;background:#01B3E1;border:none;float:right;" onclick="submit_click(this);" />

<script>
function text_click( txtSef ) {
if ( txtSef.value == txtSef.getAttribute( 'data-default' ) ) {
txtSef.value = '';
}
}
function text_blur( txtSef ) {
if ( txtSef.value == '' ) {
txtSef.value = txtSef.getAttribute( 'data-default' );
}
}
function text_focus( txtSef ) {
alert( '光标进来了' );
}

function submit_click( btSef ) {
var textbox = document.getElementsByName( 'textbox' )[ 0 ];
//if ( textbox.value == '' || textbox.value == textbox.getAttribute( 'data-default' )) {
if ( textbox.value == '' || textbox.value == getTextBoxDefaultValue( textbox ) ) {
alert( '请输入搜索内容' );
textbox.value = '';
textbox.focus();
return;
}

//alert( '您要搜索的内容为：' + textbox.value );
location = '/list.aspx?query=' + encodeURIComponent( textbox.value );
}

function getTextBoxDefaultValue( txtSef ) {
return txtSef.getAttribute( 'data-default' );
}
</script>