使用输入字段的类型使用 jQuery

赞同来自:

作为浏览器安全模型的一部分，可能会阻止此操作。

Edit: 的确，现在测试 Safari, 我得到一个错误

type property cannot be changed

.

编辑 2: 看来这是一个直接犯了一个错误 jQuery. 使用下一个直接代码 DOM 它很好：

var pass = document.createElement/'input'/;

pass.type = 'password';

document.body.appendChild/pass/;

pass.type = 'text';

pass.value = 'Password';

编辑 3: 源自源头 jQuery, 它似乎与之相关 IE /并且可以是错误或其安全模型的一部分，但是 jQuery 不具体/:

// We can't allow the type property to be changed /since it causes problems in IE/

if / name == "type" && jQuery.nodeName/ elem, "input" / && elem.parentNode /

 throw "type property can't be changed";

涵秋

赞同来自:

甚至更轻松......无需创建所有动态元素。只需通过制作一个密码字段即可创建两个单独的字段。 'real' /type="password"/ 和一个密码字段 'fake' /type="text"/, 在浅灰色字段中设置文本并设置初始值 'Password'. 然后添加一些行 Javascript 从 jQuery, 如下所示：

<script type="text/javascript">



 function pwdFocus// {

 $/'#fakepassword'/.hide//;

 $/'#password'/.show//;

 $/'#password'/.focus//;

 }



 function pwdBlur// {

 if /$/'#password'/.attr/'value'/ == ''/ {

 $/'#password'/.hide//;

 $/'#fakepassword'/.show//;

 }

 }

 </script>

<input id="fakepassword" name="fakepassword" onfocus="pwdFocus//" style="color: #ccc" type="text" value="Password"/>

<input id="password" name="password" onblur="pwdBlur//" style="display: none" type="password" value=""/>

因此，当用户输入密码字段时 'fake', 它将被隐藏，将显示真实的字段，焦点将移动到真实的领域。他们永远无法在假领域进入文本。

当用户离开实际密码字段时，脚本会看到它是空的，如果是的话，它将隐藏真实的字段并显示假。

小心不要留下两个输入元素之间的差距，因为 IE 稍微张贴另一个 /空间可视化/, 当用户进入时，该领域似乎会移动/它出来了。

八刀丁二

赞同来自:

一步解

$/'#password'/.get/0/.type = 'text';

石油百科

赞同来自:

如今，您只需使用

$/"#password"/.prop/"type", "text"/;

但是，当然，你应该真的这样做。

<input placeholder="Password" type="password"/>

总而言之 IE. 在那里有壳体的燃料来模仿这种功能 IE, 和。

快网

赞同来自:

更多跨浏览器解决方案......我希望这一切的本质将有助于某人。

此解决方案正在尝试设置属性

type

, 如果它失败，它只是创建了一个新项目

<input/>

, 通过保留元素和事件处理程序的属性。

changeTypeAttr.js

/
https://gist.github.com/3559343
/:

/* x is the <input> element

 type is the type you want to change it to.

 jQuery is required and assumed to be the "$" variable */

function changeType/x, type/ {

 x = $/x/;

 if/x.prop/'type'/ == type/

 return x; //That was easy.

 try {

 return x.prop/'type', type/; //Stupid IE security will not allow this

 } catch/e/ {

 //Try re-creating the element /yep... this sucks/

 //jQuery has no html// method for the element, so we have to put into a div first

 var html = $/"<div>"/.append/x.clone///.html//;

 var regex = /type=/\"/?/[^\"\s]+//\"/?/; //matches type=text or type="text"

 //If no match, we add the type attribute to the end; otherwise, we replace

 var tmp = $/html.match/regex/ == null ?

 html.replace/"&gt;", ' type="' + type + '"&gt;'/ :

 html.replace/regex, 'type="' + type + '"'/ /;

 //Copy data from old element

 tmp.data/'type', x.data/'type'/ /;

 var events = x.data/'events'/;

 var cb = function/events/ {

 return function// {

 //Bind all prior events

 for/i in events/

 {

 var y = events[i];

 for/j in y/

 tmp.bind/i, y[j].handler/;

 }

 }

 }/events/;

 x.replaceWith/tmp/;

 setTimeout/cb, 10/; //Wait a bit to call function

 return tmp;

 }

}

</div>
<div class="answer_text">
这个对我有用。

$/'#password'/.replaceWith/$/'#password'/.clone//.attr/'type', 'text'//;

</div>
<div class="answer_text">
使用的最佳方法 jQuery:

留下隐藏在屏幕上隐藏的初始输入字段。

$/"#Password"/.hide//; //Hide it first

var old_id = $/"#Password"/.attr/"id"/; //Store ID of hidden input for later use

$/"#Password"/.attr/"id","Password_hidden"/; //Change ID for hidden input

打开一只新的输入字段 JavaScript.

var new_input = document.createElement/"input"/;

转移 ID 和新输入字段中隐藏输入字段的值。

new_input.setAttribute/"id", old_id/; //Assign old hidden input ID to new input

new_input.setAttribute/"type","text"/; //Set proper type

new_input.value = $/"#Password_hidden"/.val//; //Transfer the value to new input

$/"#Password_hidden"/.after/new_input/; //Add new input right behind the hidden input

绕过错误 IE, 作为

type property cannot be changed

, 您可以发现它有用，如下所示：

附上事件 click/focus/change 到一个新的输入元素，可在隐藏的入口上调用相同的事件。

$/new_input/.click/function//{$/"#Password_hidden"/.click//;}/;

//Replicate above line for all other events like focus, change and so on...

旧隐藏的入口元素仍然在里面 DOM, 因此，它将响应由新输入元素引起的事件。更换时 ID 新的输入元素将类似于旧的输入元素，并响应旧隐藏条目的任何呼叫函数 ID, 但它看起来不同。

有点狡猾但是 WORKS!!! ;-/
</div>
<div class="answer_text">
你试图用它 ?prop//?

$/"#password"/.prop/'type','text'/;

http://api.jquery.com/prop/
/
</div>
<div class="answer_text">
我没有测试 IE /因为我需要它的网站 iPad/ - 我无法改变的形式 HTML, 但我可以添加 JS:

document.getElementById/'phonenumber'/.type = 'tel';

/老套 JS 丑陋的旁边 jQuery!/

但，
http://bugs.jquery.com/ticket/1957
链接到 MSDN: "以。。。开始 Microsoft Internet Explorer 5, 财产 type 有意思 read/write-once, 但只有在使用该方法创建输入元素时 createElement 在添加到文档之前。 - 所以，也许您可以复制该项目，更改类型，添加到 DOM 并删除旧的？
</div>
<div class="answer_text">
在尝试进行时，我会有相同的关于错误的消息 Firefox 5.

我用下面的帮助代码决定它：

<script language="JavaScript" type="text/javascript">



$/document/.ready/function//

{

 var passfield = document.getElementById/'password_field_id'/;

 passfield.type = 'text';

}/;



function focusCheckDefaultValue/field, type, defaultValue/

{

 if /field.value == defaultValue/

 {

 field.value = '';

 }

 if /type == 'pass'/

 {

 field.type = 'password';

 }

}

function blurCheckDefaultValue/field, type, defaultValue/

{

 if /field.value == ''/

 {

 field.value = defaultValue;

 }

 if /type == 'pass' && field.value == defaultValue/

 {

 field.type = 'text';

 }

 else if /type == 'pass' && field.value != defaultValue/

 {

 field.type = 'password';

 }

}



</script>

并使用它，只需设置属性 onFocus 和 onBlur 您的字段大致如下：

<input id="username" name="username" onblur="javascript:blurCheckDefaultValue/this, '', 'Username -OR- Email Address'/;" onfocus="javascript:focusCheckDefaultValue/this, '', 'Username -OR- Email Address'/;" type="text" value="Username"/>

<input id="pass" name="pass" onblur="javascript:blurCheckDefaultValue/this, 'pass', 'Password'/;" onfocus="javascript:focusCheckDefaultValue/this, 'pass', 'Password'/;" type="password" value="Password"/>

我也将其使用它为“用户名”字段，因此它会切换默认值。刚刚将第二个功能参数设置为 " 当你打电话的时候。

此外，可能值得注意的是现场类型 "我的密码" 默认实际上是密码，以防用户没有函数 javascript 或者有些东西会做错事，所以他的密码仍然受到保护。

文档/。功能 ready 有意思 jQuery 下载完成后加载。之后，密码字段将更改为文本字段。显然你必须改变 'password_field_id' 在密码字段的标识符上。

不要犹豫使用和更改代码！

我希望这将帮助每个人都有同样的问题 :/

-- 它的Jay Kent.

EDIT:
一个好的解决方案，但不是绝对的。效劳于 FF8 和 IE8 BUT 不完全的 Chrome /16.0.912.75 ver/. Chrome 不显示文本

密码

加载页面时。
还 - FF 打开自动填充时显示密码。
</div>
<div class="answer_text">
只需创建一个新字段即可绕过此安全问题：

var $oldPassword = $/"#password"/;

var $newPassword = $/"<input type="text">"/

 .val/$oldPassword.val///

 .appendTo/$oldPassword.parent///;

$oldPassword.remove//;

$newPassword.attr/'id','password'/;

</input></div>
<div class="answer_text">
所有想要在所有浏览器中的所有功能的解决方案：

HTML

<input id="password" type="password"/>

<input id="passwordHide" style="display:none;" type="text"/>

<input checked="checked" id="passwordSwitch" type="checkbox"/>Hide password

jQuery

$/"#passwordSwitch"/.change/function//{

 var p = $/'#password'/;

 var h = $/'#passwordHide'/;

 h.val/p.val///;

 if/$/this/.attr/'checked'/=='checked'/{

 h.hide//;

 p.show//;

 }else{

 p.hide//;

 h.show//;

 }

}/;

</div>
<div class="answer_text">
它为我工作。

$/'#newpassword_field'/.attr/"type", 'text'/;

</div>
<div class="answer_text">
类型属性无法更改。您需要使用文本输入替换或应用输入，并在发送时发送值以输入密码。
</div>
<div class="answer_text">
我认为你可以使用包含这个词的背景图像 "password", 并将其更改为空的背景图像

.focus//

.

.blur//

----> S.的形象 "password"

.focus//

-----> 胡说八道的形象 "password"

你也可以用一些 CSS 和 jQuery. 让文本字段完全在密码字段上显示， hide//-在 focus//, 并专注于密码字段......
</div>
<div class="answer_text">
试试吧

http://jsfiddle.net/sureshpattu/5WMZH/62/

$/document/.delegate/'input[type="text"]','click', function// {

 $/this/.replaceWith/'<input id="'+this.id+'" type="password" value="'+this.value+'"/>'/;

}/; 

$/document/.delegate/'input[type="password"]','click', function// {

 $/this/.replaceWith/'<input id="'+this.id+'" type="text" value="'+this.value+'"/>'/;

}/;

</div>
<div class="answer_text">
一切都更加容易如此：

document.querySelector/'input[type=password]'/.setAttribute/'type', 'text'/;

并且为了再将其转换为密码字段， /

假设密码字段是具有文本类型的第二个输入标记

/:

document.querySelectorAll/'input[type=text]'/[1].setAttribute/'type', 'password'/

</div>
<div class="answer_text">
用它很容易

<input id="pw" name="password" onclick="document.getElementById/'pw'/.type='password';

 document.getElementById/'pw'/.value='';" type="text" value="Password">

</input></div>
<div class="answer_text">

$/'#pass'/.focus/function// { 

$/'#pass'/.replaceWith/"<input id="password" name="password" size="70" type="password" value=""/>"/;

$/'#password'/.focus//;

}/;



<input id="pass" name="password" size="70" type="text" value="password"/>

</div>
<div class="answer_text">
这是一个小型代码，允许您更改

type

文件中的元素。

jquery.type.js

/
https://gist.github.com/1192149
/:

var rtype = /^/?:button|input/$/i;



jQuery.attrHooks.type.set = function/elem, value/ {

 // We can't allow the type property to be changed /since it causes problems in IE/

 if /rtype.test/elem.nodeName/ &amp;&amp; elem.parentNode/ {

 // jQuery.error/ "type property can't be changed" /;



 // JB: Or ... can it!?

 var $el = $/elem/;

 var insertionFn = 'after';

 var $insertionPoint = $el.prev//;

 if /!$insertionPoint.length/ {

 insertionFn = 'prepend';

 $insertionPoint = $el.parent//;

 }



 $el.detach//.attr/'type', value/;

 $insertionPoint[insertionFn]/$el/;

 return value;



 } else if /!jQuery.support.radioValue &amp;&amp; value === "radio" &amp;&amp; jQuery.nodeName/elem, "input"// {

 // Setting the type on a radio button after the value resets the value in IE6-9

 // Reset value to it's default in case type is set after value

 // This is for element creation

 var val = elem.value;

 elem.setAttribute/"type", value/;

 if /val/ {

 elem.value = val;

 }

 return value;

 }

}

这允许您绕过问题，删除

input

通过改变来从文档

type

, 然后将其返回原本。

请注意，此片段仅测试 WebKit 浏览器 – 没有保证其他任何事情！
</div>
<div class="answer_text">
它会做它的工作。虽然可以改进它以忽略现在无关紧要的属性。

插入

:

/function/$/{

 $.fn.changeType = function/type/ { 

 return this.each/function/i, elm/ {

 var newElm = $/"<input type='\""+type+"\"'>"/;

 for/var iAttr = 0; iAttr &lt; elm.attributes.length; iAttr++/ {

 var attribute = elm.attributes[iAttr].name;

 if/attribute === "type"/ {

 continue;

 }

 newElm.attr/attribute, elm.attributes[iAttr].value/;

 }

 $/elm/.replaceWith/newElm/;

 }/;

 };

}//jQuery/;

使用

:

$/":submit"/.changeType/"checkbox"/;

Fiddle

:

http://jsfiddle.net/joshcomley/yX23U/
/
</input></div>
<div class="answer_text">

jQuery.fn.outerHTML = function// {

 return $/this/.clone//.wrap/'<div>'/.parent//.html//;

};

$/'input#password'/.replaceWith/$/'input.password'/.outerHTML//.replace//text/g,'password'//;

</div>
<div class="answer_text">
这很简单：

this.type = 'password';

如那个

$/"#password"/.click/function//{

 this.type = 'password';

}/;

本条约已建立输入字段 "text" 在分发之前。
</div>
<div class="answer_text">
以下是一种方法，它使用密码字段旁边的映像以便在密码查看之间切换 /输入文本/ 而不看见他 /密码条目/. 我用映像 "open eye" 和 "closed eye", 但是你可以使用适合你的一切。它是如何工作的，有两个入口 / 图像，当您单击图像时，将该值从可见输入复制到隐藏，然后它们的可见性在地方变化。与许多使用刚性编码名称的许多其他答案相比，这很常见在页面上使用几次。他也在典雅地降级了 JavaScript 无法使用。

这就是页面上的两个看起来像的。在此示例中，在他的眼睛上发现了密码-A。

https://i.stack.imgur.com/E5tqY.png

$/document/.ready/function// {

 $/'img.eye'/.show//;

 $/'span.pnt'/.on/'click', 'img', function// {

 var self = $/this/;

 var myinp = self.prev//;

 var myspan = self.parent//;

 var mypnt = myspan.parent//;

 var otspan = mypnt.children//.not/myspan/;

 var otinp = otspan.children//.first//;

 otinp.val/myinp.val///;

 myspan.hide//;

 otspan.show//;

 }/;

}/;

img.eye {

 vertical-align: middle;

}

<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

<form>

<b>Password-A:</b>

<span class="pnt">

<span>

<input name="passa" type="password"/>

<img alt="O" class="eye" src="eye-open.png" style="display:none"/>

</span>

<span style="display:none">

<input type="text"/>

<img alt="*" class="eye" src="eye-closed.png"/>

</span>

</span>

</form>

<form>

<b>Password-B:</b>

<span class="pnt">

<span>

<input name="passb" type="password"/>

<img alt="O" class="eye" src="eye-open.png" style="display:none"/>

</span>

<span style="display:none">

<input type="text"/>

<img alt="*" class="eye" src="eye-closed.png"/>

</span>

</span>

</form>

</div>
<div class="answer_text">
我喜欢改变输入元素的类型： old_input.clone//....
这是一个例子。有一个复选框 "id_select_multiple". 如果此值更改为 "selected", 然后命名的入口元素 "foo" 必须由复选框替换。如果删除，则必须再次变为切换。

$/function// {

 $/"#id_select_multiple"/.change/function// {

 var new_type='';

 if /$/this/.is/":checked"//{ // .val// is always "on"

 new_type='checkbox';

 } else {

 new_type="radio";

 }

 $/'input[name="foo"]'/.each/function/index/{

 var new_input = $/this/.clone//;

 new_input.attr/"type", new_type/;

 new_input.insertBefore/$/this//;

 $/this/.remove//;

 }/;

 }

 /}/;

</div>
</div></input>

快网

赞同来自:

这个对我有用。

$/'#password'/.replaceWith/$/'#password'/.clone//.attr/'type', 'text'//;

江南孤鹜

赞同来自:

使用的最佳方法 jQuery:

留下隐藏在屏幕上隐藏的初始输入字段。

$/"#Password"/.hide//; //Hide it first

var old_id = $/"#Password"/.attr/"id"/; //Store ID of hidden input for later use

$/"#Password"/.attr/"id","Password_hidden"/; //Change ID for hidden input

打开一只新的输入字段 JavaScript.

var new_input = document.createElement/"input"/;

转移 ID 和新输入字段中隐藏输入字段的值。

new_input.setAttribute/"id", old_id/; //Assign old hidden input ID to new input

new_input.setAttribute/"type","text"/; //Set proper type

new_input.value = $/"#Password_hidden"/.val//; //Transfer the value to new input

$/"#Password_hidden"/.after/new_input/; //Add new input right behind the hidden input

绕过错误 IE, 作为

type property cannot be changed

, 您可以发现它有用，如下所示：

附上事件 click/focus/change 到一个新的输入元素，可在隐藏的入口上调用相同的事件。

$/new_input/.click/function//{$/"#Password_hidden"/.click//;}/;

//Replicate above line for all other events like focus, change and so on...

旧隐藏的入口元素仍然在里面 DOM, 因此，它将响应由新输入元素引起的事件。更换时 ID 新的输入元素将类似于旧的输入元素，并响应旧隐藏条目的任何呼叫函数 ID, 但它看起来不同。

有点狡猾但是 WORKS!!! ;-/

裸奔

赞同来自:

你试图用它 ?prop//?

$/"#password"/.prop/'type','text'/;

http://api.jquery.com/prop/
/

裸奔

赞同来自:

我没有测试 IE /因为我需要它的网站 iPad/ - 我无法改变的形式 HTML, 但我可以添加 JS:

document.getElementById/'phonenumber'/.type = 'tel';

/老套 JS 丑陋的旁边 jQuery!/

但，
http://bugs.jquery.com/ticket/1957
链接到 MSDN: "以。。。开始 Microsoft Internet Explorer 5, 财产 type 有意思 read/write-once, 但只有在使用该方法创建输入元素时 createElement 在添加到文档之前。 - 所以，也许您可以复制该项目，更改类型，添加到 DOM 并删除旧的？

诸葛浮云

赞同来自:

在尝试进行时，我会有相同的关于错误的消息 Firefox 5.

我用下面的帮助代码决定它：

<script language="JavaScript" type="text/javascript">



$/document/.ready/function//

{

 var passfield = document.getElementById/'password_field_id'/;

 passfield.type = 'text';

}/;



function focusCheckDefaultValue/field, type, defaultValue/

{

 if /field.value == defaultValue/

 {

 field.value = '';

 }

 if /type == 'pass'/

 {

 field.type = 'password';

 }

}

function blurCheckDefaultValue/field, type, defaultValue/

{

 if /field.value == ''/

 {

 field.value = defaultValue;

 }

 if /type == 'pass' && field.value == defaultValue/

 {

 field.type = 'text';

 }

 else if /type == 'pass' && field.value != defaultValue/

 {

 field.type = 'password';

 }

}



</script>

并使用它，只需设置属性 onFocus 和 onBlur 您的字段大致如下：

<input id="username" name="username" onblur="javascript:blurCheckDefaultValue/this, '', 'Username -OR- Email Address'/;" onfocus="javascript:focusCheckDefaultValue/this, '', 'Username -OR- Email Address'/;" type="text" value="Username"/>

<input id="pass" name="pass" onblur="javascript:blurCheckDefaultValue/this, 'pass', 'Password'/;" onfocus="javascript:focusCheckDefaultValue/this, 'pass', 'Password'/;" type="password" value="Password"/>

我也将其使用它为“用户名”字段，因此它会切换默认值。刚刚将第二个功能参数设置为 " 当你打电话的时候。

此外，可能值得注意的是现场类型 "我的密码" 默认实际上是密码，以防用户没有函数 javascript 或者有些东西会做错事，所以他的密码仍然受到保护。

文档/。功能 ready 有意思 jQuery 下载完成后加载。之后，密码字段将更改为文本字段。显然你必须改变 'password_field_id' 在密码字段的标识符上。

不要犹豫使用和更改代码！

我希望这将帮助每个人都有同样的问题 :/

-- 它的Jay Kent.

EDIT:
一个好的解决方案，但不是绝对的。效劳于 FF8 和 IE8 BUT 不完全的 Chrome /16.0.912.75 ver/. Chrome 不显示文本

密码

加载页面时。
还 - FF 打开自动填充时显示密码。

卫东

赞同来自:

只需创建一个新字段即可绕过此安全问题：

var $oldPassword = $/"#password"/;

var $newPassword = $/"<input type="text">"/

 .val/$oldPassword.val///

 .appendTo/$oldPassword.parent///;

$oldPassword.remove//;

$newPassword.attr/'id','password'/;

</input>

江南孤鹜

赞同来自:

所有想要在所有浏览器中的所有功能的解决方案：

HTML

<input id="password" type="password"/>

<input id="passwordHide" style="display:none;" type="text"/>

<input checked="checked" id="passwordSwitch" type="checkbox"/>Hide password

jQuery

$/"#passwordSwitch"/.change/function//{

 var p = $/'#password'/;

 var h = $/'#passwordHide'/;

 h.val/p.val///;

 if/$/this/.attr/'checked'/=='checked'/{

 h.hide//;

 p.show//;

 }else{

 p.hide//;

 h.show//;

 }

}/;

裸奔

赞同来自:

它为我工作。

$/'#newpassword_field'/.attr/"type", 'text'/;

董宝中

赞同来自:

类型属性无法更改。您需要使用文本输入替换或应用输入，并在发送时发送值以输入密码。

三叔

赞同来自:

我认为你可以使用包含这个词的背景图像 "password", 并将其更改为空的背景图像

.focus//

.

.blur//

----> S.的形象 "password"

.focus//

-----> 胡说八道的形象 "password"

你也可以用一些 CSS 和 jQuery. 让文本字段完全在密码字段上显示， hide//-在 focus//, 并专注于密码字段......

帅驴

赞同来自:

试试吧

http://jsfiddle.net/sureshpattu/5WMZH/62/

$/document/.delegate/'input[type="text"]','click', function// {

 $/this/.replaceWith/'<input id="'+this.id+'" type="password" value="'+this.value+'"/>'/;

}/; 

$/document/.delegate/'input[type="password"]','click', function// {

 $/this/.replaceWith/'<input id="'+this.id+'" type="text" value="'+this.value+'"/>'/;

}/;

裸奔

赞同来自:

一切都更加容易如此：

document.querySelector/'input[type=password]'/.setAttribute/'type', 'text'/;

并且为了再将其转换为密码字段， /

假设密码字段是具有文本类型的第二个输入标记

/:

document.querySelectorAll/'input[type=text]'/[1].setAttribute/'type', 'password'/

裸奔

赞同来自:

用它很容易

<input id="pw" name="password" onclick="document.getElementById/'pw'/.type='password';

 document.getElementById/'pw'/.value='';" type="text" value="Password">

</input>

郭文康

赞同来自:

$/'#pass'/.focus/function// { 

$/'#pass'/.replaceWith/"<input id="password" name="password" size="70" type="password" value=""/>"/;

$/'#password'/.focus//;

}/;



<input id="pass" name="password" size="70" type="text" value="password"/>

龙天

赞同来自:

这是一个小型代码，允许您更改

type

文件中的元素。

jquery.type.js

/
https://gist.github.com/1192149
/:

var rtype = /^/?:button|input/$/i;



jQuery.attrHooks.type.set = function/elem, value/ {

 // We can't allow the type property to be changed /since it causes problems in IE/

 if /rtype.test/elem.nodeName/ && elem.parentNode/ {

 // jQuery.error/ "type property can't be changed" /;



 // JB: Or ... can it!?

 var $el = $/elem/;

 var insertionFn = 'after';

 var $insertionPoint = $el.prev//;

 if /!$insertionPoint.length/ {

 insertionFn = 'prepend';

 $insertionPoint = $el.parent//;

 }



 $el.detach//.attr/'type', value/;

 $insertionPoint[insertionFn]/$el/;

 return value;



 } else if /!jQuery.support.radioValue && value === "radio" && jQuery.nodeName/elem, "input"// {

 // Setting the type on a radio button after the value resets the value in IE6-9

 // Reset value to it's default in case type is set after value

 // This is for element creation

 var val = elem.value;

 elem.setAttribute/"type", value/;

 if /val/ {

 elem.value = val;

 }

 return value;

 }

}

这允许您绕过问题，删除

input

通过改变来从文档

type

, 然后将其返回原本。

请注意，此片段仅测试 WebKit 浏览器 – 没有保证其他任何事情！

二哥

赞同来自:

它会做它的工作。虽然可以改进它以忽略现在无关紧要的属性。

插入

:

/function/$/{

 $.fn.changeType = function/type/ { 

 return this.each/function/i, elm/ {

 var newElm = $/"<input type='\""+type+"\"'>"/;

 for/var iAttr = 0; iAttr &lt; elm.attributes.length; iAttr++/ {

 var attribute = elm.attributes[iAttr].name;

 if/attribute === "type"/ {

 continue;

 }

 newElm.attr/attribute, elm.attributes[iAttr].value/;

 }

 $/elm/.replaceWith/newElm/;

 }/;

 };

}//jQuery/;

使用

:

$/":submit"/.changeType/"checkbox"/;

Fiddle

:

http://jsfiddle.net/joshcomley/yX23U/
/
</input>

石油百科

赞同来自:

jQuery.fn.outerHTML = function// {

 return $/this/.clone//.wrap/'<div>'/.parent//.html//;

};

$/'input#password'/.replaceWith/$/'input.password'/.outerHTML//.replace//text/g,'password'//;

</div>
<div class="answer_text">
这很简单：

this.type = 'password';

如那个

$/"#password"/.click/function//{

 this.type = 'password';

}/;

本条约已建立输入字段 "text" 在分发之前。
</div>
<div class="answer_text">
以下是一种方法，它使用密码字段旁边的映像以便在密码查看之间切换 /输入文本/ 而不看见他 /密码条目/. 我用映像 "open eye" 和 "closed eye", 但是你可以使用适合你的一切。它是如何工作的，有两个入口 / 图像，当您单击图像时，将该值从可见输入复制到隐藏，然后它们的可见性在地方变化。与许多使用刚性编码名称的许多其他答案相比，这很常见在页面上使用几次。他也在典雅地降级了 JavaScript 无法使用。

这就是页面上的两个看起来像的。在此示例中，在他的眼睛上发现了密码-A。

https://i.stack.imgur.com/E5tqY.png

$/document/.ready/function// {

 $/'img.eye'/.show//;

 $/'span.pnt'/.on/'click', 'img', function// {

 var self = $/this/;

 var myinp = self.prev//;

 var myspan = self.parent//;

 var mypnt = myspan.parent//;

 var otspan = mypnt.children//.not/myspan/;

 var otinp = otspan.children//.first//;

 otinp.val/myinp.val///;

 myspan.hide//;

 otspan.show//;

 }/;

}/;

img.eye {

 vertical-align: middle;

}

<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

<form>

<b>Password-A:</b>

<span class="pnt">

<span>

<input name="passa" type="password"/>

<img alt="O" class="eye" src="eye-open.png" style="display:none"/>

</span>

<span style="display:none">

<input type="text"/>

<img alt="*" class="eye" src="eye-closed.png"/>

</span>

</span>

</form>

<form>

<b>Password-B:</b>

<span class="pnt">

<span>

<input name="passb" type="password"/>

<img alt="O" class="eye" src="eye-open.png" style="display:none"/>

</span>

<span style="display:none">

<input type="text"/>

<img alt="*" class="eye" src="eye-closed.png"/>

</span>

</span>

</form>

</div>
<div class="answer_text">
我喜欢改变输入元素的类型： old_input.clone//....
这是一个例子。有一个复选框 "id_select_multiple". 如果此值更改为 "selected", 然后命名的入口元素 "foo" 必须由复选框替换。如果删除，则必须再次变为切换。

$/function// {

 $/"#id_select_multiple"/.change/function// {

 var new_type='';

 if /$/this/.is/":checked"//{ // .val// is always "on"

 new_type='checkbox';

 } else {

 new_type="radio";

 }

 $/'input[name="foo"]'/.each/function/index/{

 var new_input = $/this/.clone//;

 new_input.attr/"type", new_type/;

 new_input.insertBefore/$/this//;

 $/this/.remove//;

 }/;

 }

 /}/;

</div>

龙天

赞同来自:

这很简单：

this.type = 'password';

如那个

$/"#password"/.click/function//{

 this.type = 'password';

}/;

本条约已建立输入字段 "text" 在分发之前。

莫问

赞同来自:

以下是一种方法，它使用密码字段旁边的映像以便在密码查看之间切换 /输入文本/ 而不看见他 /密码条目/. 我用映像 "open eye" 和 "closed eye", 但是你可以使用适合你的一切。它是如何工作的，有两个入口 / 图像，当您单击图像时，将该值从可见输入复制到隐藏，然后它们的可见性在地方变化。与许多使用刚性编码名称的许多其他答案相比，这很常见在页面上使用几次。他也在典雅地降级了 JavaScript 无法使用。

这就是页面上的两个看起来像的。在此示例中，在他的眼睛上发现了密码-A。

https://i.stack.imgur.com/E5tqY.png

$/document/.ready/function// {

 $/'img.eye'/.show//;

 $/'span.pnt'/.on/'click', 'img', function// {

 var self = $/this/;

 var myinp = self.prev//;

 var myspan = self.parent//;

 var mypnt = myspan.parent//;

 var otspan = mypnt.children//.not/myspan/;

 var otinp = otspan.children//.first//;

 otinp.val/myinp.val///;

 myspan.hide//;

 otspan.show//;

 }/;

}/;

img.eye {

 vertical-align: middle;

}

<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

<form>

<b>Password-A:</b>

<span class="pnt">

<span>

<input name="passa" type="password"/>

<img alt="O" class="eye" src="eye-open.png" style="display:none"/>

</span>

<span style="display:none">

<input type="text"/>

<img alt="*" class="eye" src="eye-closed.png"/>

</span>

</span>

</form>

<form>

<b>Password-B:</b>

<span class="pnt">

<span>

<input name="passb" type="password"/>

<img alt="O" class="eye" src="eye-open.png" style="display:none"/>

</span>

<span style="display:none">

<input type="text"/>

<img alt="*" class="eye" src="eye-closed.png"/>

</span>

</span>

</form>

裸奔

赞同来自:

我喜欢改变输入元素的类型： old_input.clone//....
这是一个例子。有一个复选框 "id_select_multiple". 如果此值更改为 "selected", 然后命名的入口元素 "foo" 必须由复选框替换。如果删除，则必须再次变为切换。

$/function// {

 $/"#id_select_multiple"/.change/function// {

 var new_type='';

 if /$/this/.is/":checked"//{ // .val// is always "on"

 new_type='checkbox';

 } else {

 new_type="radio";

 }

 $/'input[name="foo"]'/.each/function/index/{

 var new_input = $/this/.clone//;

 new_input.attr/"type", new_type/;

 new_input.insertBefore/$/this//;

 $/this/.remove//;

 }/;

 }

 /}/;

使用输入字段的类型使用 jQuery

25 个回复

发起人

相关问题

问题状态

使用输入字段的类型使用 jQuery

与内容相关的链接

25 个回复

发起人

相关问题

问题状态