将字符串转换为标题大小写不起作用,并使用输入字符串填充div标记



我一直在努力处理下面的代码。基本上我把标题示例将字符串转换为JavaScript和正在使用,我也有一个需要名称和代码填充它变成一个div标签,然而,似乎把文本,例如当我输入约翰·史密斯,我不明白约翰·史密斯 capatalisation然后它州 ' s父亲全名它把名字然后剩下的文本移动一行,所以父亲的全名下面移动了一行john smith,有人能帮我弄清楚吗?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>hello whirled</title>
</head>
<body>
    <h1>Bla Bla
    </h1>
    <form name="input" action="submit.php" method="post">
        <p>
            Other Text goes here
        </p>
        <p>
            How do you wish to be referred to informally?
             <input id="name1" type="text" name="groominame" onchange="toTitleCase(this.value); fathersName(this.value);" />
        </p>
        <div id="display1"></div>
        's full name:
        <input type="text" name="fname" />
        <noscript>
            <div>
                If you can see this then SCRIPTS are turned OFF on your machine and it won't work 
            </div>
        </noscript>
        <script type="text/javascript">
            function toTitleCase(str) {
                alert(str); //test
                return str.replace(/wS*/g, function (txt) {
                    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                });
            }
            function fathersName(textarea) {
                alert(textarea); //test
                document.getElementById("display1").innerHTML = textarea;
            }
        </script>
    </form>
</body>
</html>
<div id="display1" style="float: left;margin: 3px 0px;"></div>

以上代码将使其与文本's full name正确对齐。

你的函数不能正常工作,而且两个函数也不需要。

function fathersName(ele) {
    var textarea = toTitleCase(ele);
    document.getElementById("display1").innerHTML = textarea;
}
function toTitleCase(ele) {
    var str = ele.value;
    ele.value = str.replace(/wS*/g, function (txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
    return ele.value;
}

因此输入标签更改为

 <input id="name1" type="text" name="groominame" onChange=" fathersName(this);"/>

如果您只想在其他字段中使用toTitleCase,则使用toTitleCase(this)

您需要先将其转换为大写,然后再显示它。你只是将它返回到任何地方,而不是将它保存在一个变量中或放在正确的位置。div移动是因为在div的末尾有一个新行,如果你不想在那里产生效果,可以使用span元素。

最新更新