以下代码就像聊天程序。在页面的按钮处有文本输入。但是当我改变大小时它不会改变。我也使用style =“width:XXpx”但是再没有变化。
<script>
function updatePageMsg() {
var msg = document.getElementById("Text").value;
var divElement = document.createElement("div");
divElement.setAttribute("style", "background-size:cover; padding: 5px 5px 5px 5px");
var pElement = document.createElement("p");
pElement.innerHTML = msg;
divElement.appendChild(pElement);
rightDiv = document.getElementById("rightdiv");
rightDiv.appendChild(divElement);
document.getElementById("Text").value = null;
}
$(document).ready(function () {
$('#Text').keypress(function (e) {
if (e.keyCode == 13) {
$('#SendBtn').click();
return false;
}
});
});
</script>
<div style="margin-top: 50px; background-size: cover; background-attachment: fixed; position: absolute; top: 0; left: 0; right: 0; bottom: 0">
<div style="width: 30%; left: 0; height: 100%; background-color: yellow; float: left; overflow: scroll"></div>
<div id="rightdiv" style="width: 70%; right: 0; height: 100%; background-color: red; float: left; overflow: scroll"></div>
</div>
<div style="position: fixed; bottom: 3px; width: 100%; background-size: cover; left: 0; text-align: center">
<div>
<input id="Text" type="search" value="Enter your Message here" style="font-size: 20px" size="100" />
<input onclick="updatePageMsg(); return false;" id="SendBtn" type="button" value="Send" style="font-size: 20px; bottom: 6px" />
</div>
</div>
答案 0 :(得分:0)
<input id="Text" type="search" value="Enter your Message here" style="font-size: 20px" size="100" />
要修改input
代码的宽度,您必须在width
中设置style
属性。
<input id="Text" type="search" placeholder="Enter your Message here" value="" style="font-size: 20px; width : 200px;" />
否则将size
减少到更低的值。由于大小为100
,因此看起来很大。
<input id="Text" type="search" value="Enter your Message here" style="font-size: 20px" size="40" />
我做了一次更正。 “在此处输入您的消息”消息必须是占位符而不是值。如果您将其设置为值,则用户需要在输入某些数据之前手动删除文本。
答案 1 :(得分:0)
似乎你在这里有一些CSS重叠。没有任何其他CSS文件的代码可以完美地运行,如您在此处找到的那样:http://jsfiddle.net/webyourway/bsu7d9mn/2/
我刚刚添加了&#34;宽度:200px;&#34;在样式属性,它工作。
<input id="Text" type="search" value="Enter your Message here" style="font-size: 20px;width: 200px;" size="100" />
我相信你应该检查这个元素的CSS。 100号尺寸也很大,最好把它改成一些较小的价值。
答案 2 :(得分:0)
使用样式设置输入大小时,不再需要大小属性。
<input id="Text" type="search" value="Enter your Message here" style="font-size: 20px;width:100px">