首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在<input>中使用innerHTML

在<input>中使用innerHTML
EN

Stack Overflow用户
提问于 2011-05-22 13:56:54
回答 5查看 32K关注 0票数 5

我尝试在输入标记上使用innerHTML方法,但得到的结果是一个空字符串。这是我正在使用的代码。

javascript

代码语言:javascript
复制
function setName(ID){
    document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}

HTML

代码语言:javascript
复制
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>

<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>

应该发生什么取决于我选择了哪个单选按钮,输入框的标签应该改变。我可以制作label.innerHTML=radio.value,但是这些值是根据我的php代码命名的,并且格式不好(即:电话号码与电话号码)这就是我尝试使用单选按钮的innerHTML的原因。

我能得到的任何帮助都将是非常宝贵的。

EN

回答 5

Stack Overflow用户

发布于 2011-05-22 14:36:43

您应该将input嵌入到label标记中。input标签应该由/>关闭。它是语义HTML。当你这样做的时候,点击label激活输入。那么InnerHTML只对label有效。它将返回标签值。

代码语言:javascript
复制
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
    <input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>

JavaScript:

代码语言:javascript
复制
console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'
票数 5
EN

Stack Overflow用户

发布于 2011-05-22 14:00:16

如果需要输入标记的值,则需要使用.value

票数 1
EN

Stack Overflow用户

发布于 2011-05-22 14:01:30

完成编辑。

好了,我知道你在找什么了。首先,您必须修复您的HTML (不要将文本放在输入中...并且不要在标签中输入下一步)。

代码语言:javascript
复制
<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label>
<br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />

JavaScript (在Jquery中,为了简洁起见):

代码语言:javascript
复制
function setName(elem)
{
    $('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6086318

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档