1.其实是两个框,css把textarea和下面显示字数的text去掉上下边框在略微重叠。
2.监听字数一定要用onkeyup(),之前用onkeydown()被坑了一下午时间。
html:
<div class="mui-content page-feedback">
<form>
<p class="feedback-headtext">您有什么问题或建议想对我们说?</p>
<textarea placeholder="请输入您的意见..." id="feedbackcontent" maxlength="300"></textarea>
<input id="feedbackcount" type="text" class="mui-input-clear" placeholder="0/300" readonly="readonly"/>
<button type="button" οnclick="javascript:submitinfo();">提交</button>
</form>
</div>
js:
<script type="text/javascript">
mui.init();
//提交
function submitinfo() {
var feedbackcontent = $("#feedbackcontent").val();
if (feedbackcontent == '') {
mui.alert('请输入您的建议', '', function() {
});
} else {
$.ajax({
url : '',
data : {
userid : '0',
content : feedbackcontent
},
type : 'post',
cache : false,
dataType : 'json',
success : function(data) {
var result = data.result;
if (result) {
mui.alert('提交成功,感谢您的反馈', '', function() {
window.history.back(-1);
});
} else {
mui.alert('提交失败,请稍候再试', '', function() {
});
}
},
error : function() {
mui.alert('提交失败,请稍候再试', '', function() {
});
}
});
}
};
//字数显示
document.οnkeyup=function(){
$("#feedbackcount").attr('placeholder',document.getElementById("feedbackcontent").value.length+"/300");
};
</script>
css:
.page-feedback form textarea{
height: 160px;
border-bottom-color: #ffffff;
margin-bottom: -0.3rem;
}
.page-feedback form input{
text-align: right;
border-top-color: #ffffff;
margin-bottom: 3rem;
font-size: 14px;
}